front-hub/src/components/Drawers.tsx

import { useState, useRef, useCallback } from "react";
import {
  Typography,
  Drawer,
  useMediaQuery,
  useTheme,
  Box,
  IconButton,
  Badge,
} from "@mui/material";
import ArrowBackIcon from "@mui/icons-material/ArrowBack";
import { useTickets } from "@frontend/kitui";
import SectionWrapper from "./SectionWrapper";
import CustomWrapperDrawer from "./CustomWrapperDrawer";
import CustomButton from "./CustomButton";
import { NotificationsModal } from "./NotificationsModal";
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 { useUserStore } from "@root/stores/user";
import {
  updateTickets,
  setTicketCount,
  useTicketStore,
} from "@root/stores/tickets";

import { ReactComponent as BellIcon } from "@root/assets/Icons/bell.svg";
import { ReactComponent as CartIcon } from "@root/assets/Icons/cart.svg";
import { ReactComponent as CrossIcon } from "@root/assets/Icons/cross.svg";

export default function Drawers() {
  const [openNotificationsModal, setOpenNotificationsModal] =
    useState<boolean>(false);
  const bellRef = useRef<HTMLButtonElement | null>(null);
  const navigate = useNavigate();
  const theme = useTheme();
  const upMd = useMediaQuery(theme.breakpoints.up("md"));
  const isTablet = useMediaQuery(theme.breakpoints.down(1000));
  const isDrawerOpen = useCartStore((state) => state.isDrawerOpen);
  const cart = useCart();
  const userAccount = useUserStore((state) => state.userAccount);
  const { tickets, apiPage, ticketsPerPage } = useTicketStore((state) => state);

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

  const notificationsCount = tickets.filter(
    ({ user, top_message }) =>
      user !== top_message.user_id && top_message.shown.me !== 1
  ).length;

  const totalPriceBeforeDiscounts = cart.priceBeforeDiscounts;
  const totalPriceAfterDiscounts = cart.priceAfterDiscounts;

  return (
    <Box sx={{ display: "flex", gap: isTablet ? "10px" : "20px" }}>
      <IconButton
        ref={bellRef}
        aria-label="cart"
        onClick={() => setOpenNotificationsModal((isOpened) => !isOpened)}
        sx={{
          cursor: "pointer",
          borderRadius: "6px",
          background: openNotificationsModal
            ? theme.palette.purple.dark
            : theme.palette.background.default,
          "& .MuiBadge-badge": {
            background: openNotificationsModal
              ? theme.palette.background.default
              : theme.palette.purple.dark,
            color: openNotificationsModal
              ? theme.palette.purple.dark
              : theme.palette.background.default,
          },
          "& svg > path:first-child": {
            fill: openNotificationsModal ? "#FFFFFF" : "#9A9AAF",
          },
          "& svg > path:last-child": {
            stroke: openNotificationsModal ? "#FFFFFF" : "#9A9AAF",
          },
          "&:hover": {
            background: theme.palette.purple.dark,
            "& .MuiBox-root": {
              background: theme.palette.purple.dark,
            },
            "& .MuiBadge-badge": {
              background: theme.palette.background.default,
              color: theme.palette.purple.dark,
            },
            "& svg > path:first-child": { fill: "#FFFFFF" },
            "& svg > path:last-child": { stroke: "#FFFFFF" },
          },
        }}
      >
        <Badge
          badgeContent={notificationsCount}
          sx={{
            "& .MuiBadge-badge": {
              display: notificationsCount ? "flex" : "none",
              color: "#FFFFFF",
              background: theme.palette.purple.dark,
              transform: "scale(0.8) translate(50%, -50%)",
              top: "2px",
              right: "2px",
              fontWeight: 400,
            },
          }}
        >
          <BellIcon />
        </Badge>
      </IconButton>
      <NotificationsModal
        open={openNotificationsModal}
        setOpen={setOpenNotificationsModal}
        anchorElement={bellRef.current}
        notifications={tickets
          .filter(({ user, top_message }) => user !== top_message.user_id)
          .map((ticket) => ({
            text: "У вас новое сообщение от техподдержки",
            date: new Date(ticket.updated_at).toLocaleDateString(),
            url: `/support/${ticket.id}`,
            watched:
              ticket.user === ticket.top_message.user_id ||
              ticket.top_message.shown.me === 1,
          }))}
      />
      <IconButton
        onClick={openCartDrawer}
        component="div"
        sx={{
          cursor: "pointer",
          background: theme.palette.background.default,
          borderRadius: "6px",
          "&:hover": {
            background: theme.palette.purple.dark,
            "& .MuiBox-root": {
              background: theme.palette.purple.dark,
            },
            "& .MuiBadge-badge": {
              background: theme.palette.background.default,
              color: theme.palette.purple.dark,
            },
            "& svg > path:nth-child(1)": { fill: "#FFFFFF" },
            "& svg > path:nth-child(2)": { fill: "#FFFFFF" },
            "& svg > path:nth-child(3)": { stroke: "#FFFFFF" },
          },
        }}
      >
        <Badge
          badgeContent={userAccount?.cart.length}
          sx={{
            "& .MuiBadge-badge": {
              display: userAccount?.cart.length ? "flex" : "none",
              color: "#FFFFFF",
              background: theme.palette.purple.dark,
              transform: "scale(0.8) translate(50%, -50%)",
              top: "2px",
              right: "2px",
              fontWeight: 400,
            },
          }}
        >
          <CartIcon />
        </Badge>
      </IconButton>
      <Drawer
        anchor={"right"}
        open={isDrawerOpen}
        onClose={closeCartDrawer}
        sx={{ background: "rgba(0, 0, 0, 0.55)" }}
      >
        <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",
            }}
          >
            <Typography
              component="div"
              sx={{
                fontSize: "18px",
                lineHeight: "21px",
                font: "Rubick",
              }}
            >
              Корзина
            </Typography>
            <IconButton onClick={closeCartDrawer} sx={{ p: 0 }}>
              <CrossIcon />
            </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.gray.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.gray.dark}>
                  Текст-заполнитель — это текст, который имеет Текст-заполнитель
                  — это текст, который имеет Текст-заполнитель — это текст,
                  который имеет Текст-заполнитель — это текст, который имеет
                  Текст-заполнитель
                </Typography>
              </Box>
              <Box
                sx={{
                  color: theme.palette.gray.dark,
                  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.purple.dark,
                  }}
                >
                  Оплатить
                </CustomButton>
              </Box>
            </Box>
          </Box>
        </SectionWrapper>
      </Drawer>
    </Box>
  );
}