front-hub/src/components/Drawers.tsx

import {
  Typography,
  Drawer,
  useMediaQuery,
  useTheme,
  Box,
  IconButton,
  SvgIcon,
  Icon,
  Badge,
} from "@mui/material";
import { IconsCreate } from "@root/lib/IconsCreate";
import ArrowBackIcon from "@mui/icons-material/ArrowBack";
import ClearIcon from "@mui/icons-material/Clear";
import BasketIcon from "../assets/Icons/BasketIcon.svg";
import SectionWrapper from "./SectionWrapper";
import CustomWrapperDrawer from "./CustomWrapperDrawer";
import CustomButton from "./CustomButton";
import { useNavigate } from "react-router";
import { useCart } from "@root/utils/hooks/useCart";
import { currencyFormatter } from "@root/utils/currencyFormatter";
import {
  closeCartDrawer,
  openCartDrawer,
  useCartStore,
} from "@root/stores/cart";
import { useCustomTariffsStore } from "@root/stores/customTariffs";
import { useUserStore } from "@root/stores/user";

export default function Drawers() {
  const navigate = useNavigate();
  const theme = useTheme();
  const upMd = useMediaQuery(theme.breakpoints.up("md"));
  const isDrawerOpen = useCartStore((state) => state.isDrawerOpen);
  const cart = useCart();
  const summaryPriceBeforeDiscountsMap = useCustomTariffsStore(
    (state) => state.summaryPriceBeforeDiscountsMap
  );
  const summaryPriceAfterDiscountsMap = useCustomTariffsStore(
    (state) => state.summaryPriceAfterDiscountsMap
  );
  const userAccount = useUserStore((state) => state.userAccount);

  const basePrice = Object.values(summaryPriceBeforeDiscountsMap).reduce(
    (a, e) => a + e,
    0
  );
  const discountedPrice = Object.values(summaryPriceAfterDiscountsMap).reduce(
    (a, e) => a + e,
    0
  );

  const totalPriceBeforeDiscounts = cart.priceBeforeDiscounts + basePrice;
  const totalPriceAfterDiscounts = cart.priceAfterDiscounts + discountedPrice;

  return (
    <IconButton sx={{ p: 0 }}>
      <Typography
        onClick={openCartDrawer}
        component="div"
        sx={{
          position: "absolute",
          "&:hover": {
            "& .MuiBox-root": {
              background: theme.palette.brightPurple.main,
            },
            "& .MuiBadge-badge": {
              background: theme.palette.background.default,
              color: theme.palette.brightPurple.main,
            },
          },
        }}
      >
        <Badge
          badgeContent={userAccount?.cart.length}
          sx={{
            "& .MuiBadge-badge": {
              color: "#FFFFFF",
              background: theme.palette.brightPurple.main,
              transform: "scale(0.8) translate(50%, -50%)",
              top: "10px",
              right: "10px",
              fontWeight: 400,
            },
          }}
        >
          <IconsCreate svg={BasketIcon} bgcolor="#F2F3F7" />
        </Badge>
      </Typography>
      {cart.itemCount && (
        <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",
            }}
          >
            {cart.itemCount}
          </Typography>
        </Icon>
      )}

      <Drawer anchor={"right"} open={isDrawerOpen} onClose={closeCartDrawer}>
        <SectionWrapper
          maxWidth="lg"
          sx={{
            pl: "0px",
            pr: "0px",
            width: "450px",
          }}
        >
          <Box
            sx={{
              width: "100%",
              pt: "12px",
              pb: "12px",
              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>
            <IconButton onClick={closeCartDrawer} sx={{ p: 0 }}>
              <SvgIcon component={ClearIcon} />
            </IconButton>
          </Box>
          <Box sx={{ pl: "20px", pr: "20px" }}>
            {cart.services.map((serviceData) => (
              <CustomWrapperDrawer
                key={serviceData.serviceKey}
                serviceData={serviceData}
              />
            ))}
            <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",
                }}
              >
                <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,
                    }}
                  >
                    {currencyFormatter.format(totalPriceBeforeDiscounts / 100)}
                  </Typography>
                  <Typography
                    variant="p1"
                    sx={{
                      fontWeight: 500,
                      fontSize: "26px",
                      lineHeight: "31px",
                      order: upMd ? 2 : 1,
                    }}
                  >
                    {currencyFormatter.format(totalPriceAfterDiscounts / 100)}
                  </Typography>
                </Box>
                <CustomButton
                  variant="contained"
                  onClick={() => navigate("/basket")}
                  sx={{
                    mt: "25px",
                    backgroundColor: theme.palette.brightPurple.main,
                  }}
                >
                  Оплатить
                </CustomButton>
              </Box>
            </Box>
          </Box>
        </SectionWrapper>
      </Drawer>
    </IconButton>
  );
}