front-hub/src/components/Drawers.tsx

import { useCallback } from "react";
import {
  Typography,
  Drawer,
  useMediaQuery,
  useTheme,
  Box,
  IconButton,
  SvgIcon,
  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 { useTickets } from "@frontend/kitui";
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";
import {
  updateTickets,
  setTicketCount,
  useTicketStore,
} from "@root/stores/tickets";

import bellIcon from "@root/assets/Icons/bell.svg";

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 ticketCount = useTicketStore((state) => state.ticketCount);
  const ticketApiPage = useTicketStore((state) => state.apiPage);
  const ticketsPerPage = useTicketStore((state) => state.ticketsPerPage);

  useTickets({
    url: "https://hub.pena.digital/heruvym/getTickets",
    ticketsPerPage,
    ticketApiPage,
    onNewTickets: useCallback((result) => {
      if (result.data) updateTickets(result.data);
      setTicketCount(result.count);
    }, []),
    onError: () => {},
  });

  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 (
    <Box sx={{ display: "flex", gap: "20px" }}>
      <IconButton
        aria-label="cart"
        sx={{
          background: theme.palette.background.default,
          borderRadius: "6px",
          "&:hover": { background: theme.palette.background.default },
        }}
      >
        <Badge
          badgeContent={ticketCount}
          sx={{
            "& .MuiBadge-badge": {
              color: "#FFFFFF",
              background: theme.palette.brightPurple.main,
              transform: "scale(0.8) translate(50%, -50%)",
              top: "2px",
              right: "2px",
              fontWeight: 400,
            },
          }}
        >
          <img src={bellIcon} alt="cart" />
        </Badge>
      </IconButton>
      <Box
        onClick={openCartDrawer}
        component="div"
        sx={{
          cursor: "pointer",
          "&: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>
      </Box>

      <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("/cart")}
                  sx={{
                    mt: "25px",
                    backgroundColor: theme.palette.brightPurple.main,
                  }}
                >
                  Оплатить
                </CustomButton>
              </Box>
            </Box>
          </Box>
        </SectionWrapper>
      </Drawer>
    </Box>
  );
}