front-hub/src/components/Navbar/DialogMenu.tsx

import { useState } from "react";
import { TransitionProps } from "@mui/material/transitions";

import logotip from "../../assets/Icons/logoPenaHab.svg";
import logotipBlack from "../../assets/Icons/black_logo_PenaHab.svg";
import CustomAvatar from "./Avatar";
import CloseIcon from "../icons/CloseIcons";
import React from "react";
import {
  AppBar,
  Box,
  Button,
  Dialog,
  IconButton,
  List,
  ListItem,
  Slide,
  Toolbar,
  Typography,
  useMediaQuery,
  useTheme,
} from "@mui/material";
import { Link, useLocation } from "react-router-dom";
import { useUserStore } from "@root/stores/user";
import { currencyFormatter } from "@root/utils/currencyFormatter";

type MenuItem = {
  name: string;
  url: string;
  subMenu?: MenuItem[];
};

const arrayMenu: MenuItem[] = [
  {
    name: "Тарифы",
    url: "/tariffs",
    subMenu: [
      { name: "Тарифы на время", url: "/tariffs/time" },
      { name: "Тарифы на объём", url: "/tariffs/volume" },
      { name: "Кастомный тариф", url: "/tariffconstructor" },
    ],
  },
  { name: "Вопросы и ответы", url: "/faq" },
  { name: "Корзина", url: "/basket" },
  { name: "История", url: "/history" },
];

const Transition = React.forwardRef(function Transition(
  props: TransitionProps & {
    children: React.ReactElement;
  },

  ref: React.Ref<null>
) {
  return <Slide direction="right" ref={ref} {...props} />;
});

interface DialogMenuProps {
  open: boolean;
  handleClose: () => void;
}

export default function DialogMenu({ open, handleClose }: DialogMenuProps) {
  const [activeSubMenuIndex, setActiveSubMenuIndex] = useState<number>(-1);
  const theme = useTheme();
  const location = useLocation();
  const isMobile = useMediaQuery(theme.breakpoints.down(600));
  const user = useUserStore((state) => state.user);
  const cash = useUserStore((state) => state.userAccount?.wallet.cash) ?? 0;

  const closeDialogMenu = () => {
    setActiveSubMenuIndex(-1);

    handleClose();
  };

  const handleSubMenu = (index: number) =>
    setActiveSubMenuIndex((activeIndex) =>
      activeIndex !== index ? index : -1
    );

  return (
    <Dialog
      fullScreen
      sx={{
        zIndex: 1501,
        width: isMobile ? "100%" : "320px",
        mr: "auto",
        height: "100%",
        "& .MuiPaper-root.MuiDialog-paper": {
          background: theme.palette.background.default,
        },
      }}
      open={open}
      onClose={closeDialogMenu}
      TransitionComponent={Transition}
    >
      <AppBar
        sx={{
          position: "relative",
          display: "flex",
          justifyContent: "center",
          columnGap: "100px",
          background: location.pathname === "/" ? "#333647" : "#FFFFFF",
          boxShadow: "none",
          height: isMobile ? "66px" : "100px",
        }}
      >
        <Toolbar
          sx={{
            position: "relative",
            display: "flex",
            justifyContent: "flex-start",
            svg: { color: "#000000" },
          }}
        >
          <IconButton
            edge="start"
            color="inherit"
            onClick={closeDialogMenu}
            aria-label="close"
          >
            <CloseIcon />
          </IconButton>
          {isMobile && (
            <Box sx={{ ml: "auto" }}>
              <img
                src={location.pathname === "/" ? logotip : logotipBlack}
                alt="icon"
              />
            </Box>
          )}
        </Toolbar>
      </AppBar>
      <List
        sx={{
          maxWidth: "250px",
          background: location.pathname === "/" ? "#333647" : "#FFFFFF",
          height: "100vh",
          p: "0",
        }}
      >
        <ListItem
          sx={{
            pl: 0,
            pr: 0,
            flexDirection: "column",
            alignItems: isMobile ? "start" : "end",
          }}
        >
          {arrayMenu.map(({ name, url, subMenu = [] }, index) => (
            <Box sx={{ width: "100%" }} key={name + index}>
              <Button
                key={index}
                component={Link}
                to={url}
                state={user ? undefined : { backgroundLocation: location }}
                disableRipple
                variant="text"
                onClick={() =>
                  !subMenu.length ? closeDialogMenu() : handleSubMenu(index)
                }
                sx={{
                  padding: "10px 10px 10px 20px",
                  display: "block",
                  fontWeight: 500,
                  color:
                    location.pathname === url
                      ? "#7E2AEA"
                      : location.pathname === "/"
                      ? "white"
                      : "black",
                  textTransform: "none",
                  fontSize: "16px",
                  borderRadius: 0,
                  "&:hover, &:active": {
                    color: "#7E2AEA",
                    background:
                      index === activeSubMenuIndex
                        ? theme.palette.background.default
                        : "none",
                  },
                }}
              >
                <Box>{name}</Box>
              </Button>
              {subMenu.length ? (
                <Box
                  sx={{
                    backgroundColor: theme.palette.background.paper,
                    width: "100%",
                  }}
                >
                  {index === activeSubMenuIndex &&
                    subMenu.map(({ name, url }) => (
                      <Link
                        key={url}
                        style={{
                          paddingLeft: "30px",
                          display: "block",
                          textDecoration: "none",
                        }}
                        to={url}
                        onClick={closeDialogMenu}
                      >
                        <Typography
                          variant="body2"
                          sx={{
                            padding: "12px",
                            whiteSpace: "nowrap",
                            fontWeight: 400,
                            color:
                              location.pathname === url
                                ? "#7E2AEA"
                                : location.pathname === "/"
                                ? "white"
                                : "black",
                          }}
                        >
                          {name}
                        </Typography>
                      </Link>
                    ))}
                </Box>
              ) : (
                <></>
              )}
            </Box>
          ))}
        </ListItem>
        {isMobile ? (
          location.pathname === "/" ? (
            <Button
              component={Link}
              to={user ? "/tariffs" : "/signin"}
              state={user ? undefined : { backgroundLocation: location }}
              variant="outlined"
              sx={{
                width: "188px",
                color: "white",
                border: "1px solid white",
                ml: "40px",
                mt: "35px",
                textTransform: "none",
                fontWeight: "400",
                fontSize: "18px",
                lineHeight: "24px",
                borderRadius: "8px",
                padding: "8px 17px",
              }}
            >
              Личный кабинет
            </Button>
          ) : (
            <Box
              sx={{
                width: "100%",
                height: "72px",
                background: "#F2F3F7",
                display: "flex",
                alignItems: "center",
                position: "absolute",
                bottom: "0",
              }}
            >
              <CustomAvatar />
              <Box sx={{ ml: "8px", whiteSpace: "nowrap" }}>
                <Typography
                  sx={{
                    fontSize: "12px",
                    lineHeight: "14px",
                    color: theme.palette.grey3.main,
                  }}
                >
                  Мой баланс
                </Typography>
                <Typography
                  variant="body2"
                  color={theme.palette.brightPurple.main}
                >
                  {currencyFormatter.format(cash / 100)}
                </Typography>
              </Box>
            </Box>
          )
        ) : (
          <Box
            sx={{
              position: "absolute",
              right: "40px",
              bottom: "60px",
            }}
          >
            <img
              src={location.pathname === "/" ? logotip : logotipBlack}
              alt="icon"
            />
          </Box>
        )}
      </List>
    </Dialog>
  );
}