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 { StepperSquiz } from "@components/StepperSquiz";
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";

export const 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 && <StepperSquiz text={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>
  );
};
