front-hub/src/components/NavbarSite/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 { AvatarButton } from "@frontend/kitui";


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 initials = useUserStore(state => state.initials);

    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",
                        }}
                    >
                        <AvatarButton
                            component={Link}
                            to="/settings"
                            sx={{ ml: "27px" }}
                        >{initials}</AvatarButton>
                        <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>
    );
}