import { Box, IconButton, Typography, useMediaQuery, useTheme } from "@mui/material";
import ArrowBackIcon from "@mui/icons-material/ArrowBack";
import { useState } from "react";

import ComplexNavText from "@components/ComplexNavText";
import SectionWrapper from "@components/SectionWrapper";
import TotalPrice from "@components/TotalPrice";
import AccordionWrapperBasket from "./AccordionWrapper";

interface TabPanelProps {
  index: number;
  value: number;
  children?: React.ReactNode;
  mt: string;
}

function TabPanel({ index, value, children, mt }: TabPanelProps) {
  return (
    <Box hidden={index !== value} sx={{ mt }}>
      {children}
    </Box>
  );
}
const contentBasket = [
  {
    title: "Шаблонизатор",
    data: [
      ["Дисковое хранилище 5 гб", 390],
      ["Подписка на месяц ", 290],
      ["200 бесплатных генераций", 590],
    ],
  },
  {
    title: "Квиз конструктор",
    data: [
      ["Дисковое хранилище 5 гб", 200],
      ["Подписка на месяц ", 300],
      ["200 бесплатных генераций", 1000],
    ],
  },
];

export default function BasketPage() {
  const theme = useTheme();
  const upMd = useMediaQuery(theme.breakpoints.up("md"));
  const [tabIndex, setTabIndex] = useState<number>(0);

  const handleChange = (event: React.SyntheticEvent, newValue: number) => {
    setTabIndex(newValue);
  };

  return (
    <SectionWrapper
      maxWidth="lg"
      sx={{
        mt: upMd ? "25px" : "20px",
        mb: upMd ? "70px" : "37px",
      }}
    >
      {upMd && <ComplexNavText text1="Все тарифы — " text2="Корзина" />}
      <Box
        sx={{
          mt: "20px",
          mb: upMd ? "40px" : "20px",
          display: "flex",
          gap: "10px",
        }}
      >
        {!upMd && (
          <IconButton sx={{ p: 0, height: "28px", width: "28px", color: "black" }}>
            <ArrowBackIcon />
          </IconButton>
        )}
        <Typography variant="h4">Вопросы и ответы</Typography>
      </Box>
      <TabPanel value={tabIndex} index={0} mt={upMd ? "27px" : "10px"}>
        <AccordionWrapperBasket
          content={[
            {
              title: "Шаблонизатор",
              data: [
                ["Дисковое хранилище 5 гб", 390],
                ["Подписка на месяц ", 290],
                ["200 бесплатных генераций", 590],
              ],
            },
            {
              title: "Квиз конструктор",
              data: [
                ["Дисковое хранилище 5 гб", 200],
                ["Подписка на месяц ", 300],
                ["200 бесплатных генераций", 1000],
              ],
            },
          ]}
        />
      </TabPanel>
      <TotalPrice />
    </SectionWrapper>
  );
}