import { IconButton, Box, Typography, useMediaQuery, useTheme } from "@mui/material";
import SectionWrapper from "../../components/SectionWrapper";
import AccordionWrapper from "./AccordionWrapper";
import ArrowBackIcon from "@mui/icons-material/ArrowBack";
import { useHistoryTracker } from "@root/utils/hooks/useHistoryTracker";
import { useCart } from "@root/utils/hooks/useCart";
import SaveWrapper from "./SaveWrapper";

export default function Faq() {
  const theme = useTheme();
  const upMd = useMediaQuery(theme.breakpoints.up("md"));
  const cart = useCart();

  const handleCustomBackNavigation = useHistoryTracker();

  console.log(cart);

  return (
    <SectionWrapper
      maxWidth="lg"
      sx={{
        mt: upMd ? "25px" : "20px",
        mb: upMd ? "70px" : "37px",
      }}
    >
      <Box
        sx={{
          mt: "20px",
          mb: upMd ? "40px" : "20px",
          display: "flex",
          gap: "10px",
        }}
      >
        {!upMd && (
          <IconButton onClick={handleCustomBackNavigation} sx={{ p: 0, height: "28px", width: "28px", color: "black" }}>
            <ArrowBackIcon />
          </IconButton>
        )}
        <Typography variant="h4">Сохраненные тарифы</Typography>
      </Box>
      <Box mt={upMd ? "27px" : "10px"}>
        {cart.services.map(({ serviceKey, tariffs }) =>
          serviceKey === "custom"
            ? tariffs.map(({ privileges }) => <SaveWrapper serviceKey={serviceKey} content={privileges} />)
            : null
        )}
      </Box>
    </SectionWrapper>
  );
}