import { useState } from "react";
import { useLocation } from "react-router-dom";
import { Box, Typography, useMediaQuery, useTheme } from "@mui/material";

import SectionWrapper from "@components/SectionWrapper";
import CustomRadioButtons from "@components/CustomRadioButtons";
import FreeTariffCard from "./FreeTariffCard";
import TariffCardTimeAndVolume from "./TariffCardTimeAndVolume";

import { basketStore } from "@root/stores/BasketStore";

import { _mocsk_ } from "@root/__mocks__/CustomRadioButtonsMocks";
import { showCaseObject } from "@root/__mocks__/showCaseObject";

import { IconsCreate } from "@root/lib/IconsCreate";
import ComplexNavText from "@root/components/ComplexNavText";

export default function TariffPage() {
    const theme = useTheme();
    const upMd = useMediaQuery(theme.breakpoints.up("md"));
    const { add } = basketStore();
    const location = useLocation();
    const [type, setType] = useState<string>("templ");
    const unit: string = String(location.pathname).slice(9);

    const StepperText: Record<string, string> = { volume: "Тарифы на объём", time: "Тарифы на время" };

    return (
        <SectionWrapper
            maxWidth="lg"
            sx={{
                mt: "20px",
                mb: upMd ? "90px" : "63px",
                display: "flex",
                flexDirection: "column",
            }}
        >
            {upMd && <ComplexNavText text1="Все тарифы — " text2={StepperText[unit]} />}
            <Typography variant="h4" sx={{ marginBottom: "28px" }}>
                {StepperText[unit]}
            </Typography>
            <CustomRadioButtons setType={setType} _mocsk_={_mocsk_} />
            <Box
                sx={{
                    width: upMd ? "100%" : undefined,
                    mt: "40px",
                    mb: "30px",
                    display: "flex",
                    flexDirection: upMd ? "row" : "column",
                    gap: upMd ? "3.5%" : "30px",
                    alignSelf: "center",
                    flexWrap: "wrap",
                }}
            >
                {showCaseObject[type][unit].map((element, index) => (
                    <TariffCardTimeAndVolume
                        key={element.id}
                        sx={{ width: upMd ? "31%" : undefined, marginBottom: "40px" }}
                        icon={<IconsCreate svg={element.style.icon} bgcolor={element.style.bgcolor} />}
                        headerText={element.name}
                        text={element.desc}
                        money={element.price}
                        href=""
                        onclick={() => {
                            add({ id: element.id, type: type, obj: element });
                        }}
                        textButton="выбрать"
                    />
                ))}

                <FreeTariffCard
                    sx={{
                        width: upMd ? "31%" : undefined,
                        marginBottom: "40px",
                        backgroundColor: "#7E2AEA",
                        color: "white",
                    }}
                    headerText="бесплатно"
                    text="Текст-заполнитель — это текст, который имеет "
                    href=""
                />
            </Box>
        </SectionWrapper>
    );
}