front-hub/src/components/Drawers.tsx

import React, { useEffect } from "react";
import { Typography, Drawer, useMediaQuery, useTheme, Box, IconButton, SvgIcon, Icon } from "@mui/material";
import { IconsCreate } from "@root/lib/IconsCreate";
import ArrowBackIcon from "@mui/icons-material/ArrowBack";
import ClearIcon from "@mui/icons-material/Clear";

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

import BasketIcon from "../assets/Icons/BasketIcon.svg";
import SectionWrapper from "./SectionWrapper";
import CustomWrapperDrawer from "./CustomWrapperDrawer";
import CustomButton from "./CustomButton";
import { useNavigate } from "react-router";

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

type BasketItem = {
  name: string;
  desc: string;
  id: string;
  privelegeid: string;
  amount: number;
  price: number;
}[];

function TabPanel({ index, value, children, mt }: TabPanelProps) {
  return (
    <Box hidden={index !== value} sx={{ mt }}>
      {children}
    </Box>
  );
}

export default function Drawers() {
  const [tabIndex, setTabIndex] = useState<number>(0);
  const [basketQuantity, setBasketQuantity] = useState<number>();
  const navigate = useNavigate();
  const { templ, squiz, reducer, open, openDrawer } = basketStore();
  const theme = useTheme();
  const upMd = useMediaQuery(theme.breakpoints.up("md"));

  const newArray: BasketItem = [...Object.values(templ), ...Object.values(squiz), ...Object.values(reducer)];
  const sum = newArray.reduce((accamulator, { price }) => (accamulator += price), 0);

  useEffect(() => {
    setBasketQuantity(Object.keys(templ).length + Object.keys(squiz).length + Object.keys(reducer).length);
  }, [templ, squiz, reducer]);

  return (
    <IconButton sx={{ p: 0 }}>
      <Typography onClick={open(true)} component="div" sx={{ position: "absolute" }}>
        <IconsCreate svg={BasketIcon} bgcolor="#F2F3F7" />
      </Typography>
      {basketQuantity && (
        <Icon
          component="div"
          sx={{
            position: "relative",
            left: "8px",
            bottom: "7px",

            width: "16px",
            height: "16px",
            backgroundColor: "#7E2AEA",
            borderRadius: "12px",
          }}
        >
          <Typography
            component="div"
            sx={{
              display: "flex",
              fontSize: "12px",
              mt: "4.5px",
              width: "100%",
              height: "9px",
              color: "white",
              alignItems: "center",
              justifyContent: "center",
            }}
          >
            {basketQuantity}
          </Typography>
        </Icon>
      )}

      <Drawer anchor={"right"} open={openDrawer} onClose={open(false)}>
        <SectionWrapper
          maxWidth="lg"
          sx={{
            pl: "0px",
            pr: "0px",
            width: "450px",
          }}
        >
          <Box
            sx={{
              width: "100%",
              pt: "20px",
              pb: "20px",
              display: "flex",
              justifyContent: "space-between",
              bgcolor: "#F2F3F7",
              gap: "10px",
              pl: "20px",
              pr: "20px",
            }}
          >
            {!upMd && (
              <IconButton sx={{ p: 0, height: "28px", width: "28px", color: "black" }}>
                <ArrowBackIcon />
              </IconButton>
            )}
            <Typography
              component="div"
              sx={{
                fontSize: "18px",
                lineHeight: "21px",
                font: "Rubick",
              }}
            >
              Корзина
            </Typography>
            <SvgIcon onClick={open(false)} sx={{ cursor: "pointer" }} component={ClearIcon} />
          </Box>
          <Box sx={{ pl: "20px", pr: "20px" }}>
            <TabPanel value={tabIndex} index={0} mt={"10px"}>
              {Object.keys(templ).length > 0 ? (
                <CustomWrapperDrawer type="templ" content={Object.values(templ)} />
              ) : (
                <></>
              )}
              {Object.keys(squiz).length > 0 ? (
                <CustomWrapperDrawer type="squiz" content={Object.values(squiz)} />
              ) : (
                <></>
              )}
              {Object.keys(reducer).length > 0 ? (
                <CustomWrapperDrawer type="reducer" content={Object.values(reducer)} />
              ) : (
                <></>
              )}
            </TabPanel>
            <Box
              sx={{
                mt: "40px",
                pt: upMd ? "30px" : undefined,
                borderTop: upMd ? `1px solid ${theme.palette.grey2.main}` : undefined,
              }}
            >
              <Box
                sx={{
                  width: upMd ? "100%" : undefined,
                  display: "flex",
                  flexWrap: "wrap",
                  flexDirection: "column",
                }}
              >
                <Typography variant="h4" mb={upMd ? "18px" : "30px"}>
                  Итоговая цена
                </Typography>
                <Typography color={theme.palette.grey3.main}>
                  Текст-заполнитель — это текст, который имеет Текст-заполнитель — это текст, который имеет
                  Текст-заполнитель — это текст, который имеет Текст-заполнитель — это текст, который имеет
                  Текст-заполнитель
                </Typography>
              </Box>
              <Box
                sx={{
                  color: theme.palette.grey3.main,
                  pb: "100px",
                  pt: "38px",
                  pl: upMd ? "20px" : undefined,
                }}
              >
                <Box
                  sx={{
                    display: "flex",
                    flexDirection: upMd ? "column" : "row",
                    alignItems: upMd ? "start" : "center",
                    mt: upMd ? "10px" : "30px",
                    gap: "15px",
                  }}
                >
                  <Typography
                    color={theme.palette.orange.main}
                    sx={{
                      textDecoration: "line-through",
                      order: upMd ? 1 : 2,
                    }}
                  >
                    20 190 руб.
                  </Typography>
                  <Typography
                    variant="p1"
                    sx={{
                      fontWeight: 500,
                      fontSize: "26px",
                      lineHeight: "31px",
                      order: upMd ? 2 : 1,
                    }}
                  >
                    {sum} руб.
                  </Typography>
                </Box>
                <CustomButton
                  variant="contained"
                  onClick={() => navigate("/basket")}
                  sx={{
                    mt: "25px",
                    backgroundColor: theme.palette.brightPurple.main,
                  }}
                >
                  Оплатить
                </CustomButton>
              </Box>
            </Box>
          </Box>
        </SectionWrapper>
      </Drawer>
    </IconButton>
  );
}