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";

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

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

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

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

export default function DialogMenu({ open, handleClose }: DialogMenuProps) {
    const theme = useTheme();
    const location = useLocation();
    const isMobile = useMediaQuery(theme.breakpoints.down(600));
    const user = useUserStore((state) => state.user);

    return (
        <Dialog
            fullScreen
            sx={{ width: isMobile ? "100%" : "320px", ml: "auto", height: "100%" }}
            open={open}
            onClose={handleClose}
            TransitionComponent={Transition}
        >
            <AppBar
                sx={{
                    position: "relative",
                    background: location.pathname === "/" ? "#333647" : "#FFFFFF",
                    boxShadow: "none",
                    height: isMobile ? "66px" : "100px",
                }}
            >
                <Toolbar
                    sx={{
                        display: "flex",
                        justifyContent: "space-between",
                        svg: { color: "#000000" },
                    }}
                >
                    {isMobile && (
                        <Box sx={{ mt: "6px" }}>
                            <img src={location.pathname === "/" ? logotip : logotipBlack} alt="icon" />
                        </Box>
                    )}
                    <IconButton sx={{ ml: "auto" }} edge="start" color="inherit" onClick={handleClose} aria-label="close">
                        <CloseIcon />
                    </IconButton>
                </Toolbar>
            </AppBar>
            <List sx={{ background: location.pathname === "/" ? "#333647" : "#FFFFFF", height: "100vh", p: "0" }}>
                <ListItem sx={{ pl: "40px", flexDirection: "column", alignItems: isMobile ? "start" : "end" }}>
                    {arrayMenu.map(({ name, url }, index) => (
                        <Button
                            key={index}
                            component={Link}
                            to={url}
                            onClick={handleClose}
                            state={user ? undefined : { backgroundLocation: location }}
                            disableRipple
                            variant="text"
                            sx={{
                                fontWeight: "500",
                                color: location.pathname === url ? "#7E2AEA" : location.pathname === "/" ? "white" : "black",
                                height: "20px",
                                textTransform: "none",
                                marginBottom: "25px",
                                fontSize: "16px",
                                "&:hover": {
                                    background: "none",
                                    color: "#7E2AEA",
                                },
                            }}
                        >
                            {name}
                        </Button>
                    ))}
                </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}>
                                    00.00 руб.
                                </Typography>
                            </Box>
                        </Box>
                    )
                ) : (
                    <Box
                        sx={{
                            position: "absolute",
                            right: "40px",
                            bottom: "60px",
                        }}
                    >
                        <img src={location.pathname === "/" ? logotip : logotipBlack} alt="icon" />
                    </Box>
                )}
            </List>
        </Dialog>
    );
}
