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

import { useState } from "react";
import { Link, useLocation } from "react-router-dom";
import { Box, Button, List, ListItem, Typography, useMediaQuery, useTheme } from "@mui/material";

import { useUserStore } from "@root/stores/user";
import { currencyFormatter } from "@root/utils/currencyFormatter";
import { cardShadow } from "@root/utils/theme";

import CustomAvatar from "./Avatar";

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: "/settings" },
  { name: "Вопросы и ответы", url: "/faq" },
  { name: "Корзина", url: "/cart" },
  { name: "Поддержка", url: "/support" },
  { name: "История", url: "/history" },
];

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

export default function DialogMenu({ handleClose }: DialogMenuProps) {
  const [activeSubMenuIndex, setActiveSubMenuIndex] = useState<number>(-1);
  const theme = useTheme();
  const location = useLocation();
  const isTablet = useMediaQuery(theme.breakpoints.down(1000));
  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 (
    <Box sx={{ height: "100%", maxHeight: "calc(100vh - 51px)" }}>
      <List
        sx={{
          maxWidth: "250px",
          background: location.pathname === "/" ? "#333647" : "#FFFFFF",
          height: "100%",
        }}
      >
        <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={{ previousUrl: location.pathname }}
                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%",
                    boxShadow: !isTablet ? cardShadow : null,
                  }}
                >
                  {index === activeSubMenuIndex &&
                    subMenu.map(({ name, url }) => (
                      <Link
                        key={name + url}
                        style={{
                          paddingLeft: "30px",
                          display: "block",
                          textDecoration: "none",
                        }}
                        to={url}
                        onClick={closeDialogMenu}
                        state={{ previousUrl: location.pathname }}
                      >
                        <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>
        {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.gray.dark,
                }}
              >
                Мой баланс
              </Typography>
              <Typography variant="body2" color={theme.palette.purple.main}>
                {currencyFormatter.format(cash / 100)}
              </Typography>
            </Box>
          </Box>
        )}
      </List>
    </Box>
  );
}