import { Box, IconButton, Tabs, Typography, useMediaQuery, useTheme } from "@mui/material";
import ComplexNavText from "../../components/ComplexNavText";
import SectionWrapper from "../../components/SectionWrapper";
import ArrowBackIcon from "@mui/icons-material/ArrowBack";
import { useState } from "react";
import AccordionWrapperBasket from "./AccordionWrapper";
import TotalPrice from "../../components/TotalPrice";


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 >
    );
}