import { Link, useLocation, useNavigate } from "react-router-dom";
import { useEffect } from "react";
import { Box, Button, Container, Divider, IconButton, Typography, useTheme } from "@mui/material";

import SectionWrapper from "../SectionWrapper";
import { basketStore } from "@stores/BasketStore";
import { authStore } from "@stores/makeRequest";

import LogoutIcon from "../icons/LogoutIcon";
import WalletIcon from "../icons/WalletIcon";
import CustomAvatar from "./Avatar";
import Drawers from "../Drawers";
import PenaLogo from "../PenaLogo";
import Menu from "../Menu";
import { logout } from "@root/api/auth";
import { enqueueSnackbar } from "notistack";
import { clearUser, useUserStore } from "@root/stores/user";

interface Props {
    isLoggedIn: boolean;
}

export default function NavbarFull({ isLoggedIn }: Props) {
    const theme = useTheme();
    const { clearToken } = authStore();
    const location = useLocation();
    const navigate = useNavigate();
    const user = useUserStore(state => state.user);

    const { open } = basketStore();

    useEffect(() => {
        if (location.pathname === "/basket") {
            open(false)();
        }
    }, [location.pathname, open]);

    async function handleLogoutClick() {
        try {
            await logout();
            clearToken();
            clearUser();
            navigate("/");
        } catch (error: any) {
            console.log("Logout error", error);
            enqueueSnackbar(error.response?.data?.message ?? error.message ?? "Logout error");
        }
    }

    return isLoggedIn ? (
        <Container
            component="nav"
            disableGutters
            maxWidth={false}
            sx={{
                px: "16px",
                display: "flex",
                height: "80px",
                alignItems: "center",
                gap: "60px",
                bgcolor: "white",
                borderBottom: "1px solid #E3E3E3",
            }}
        >
            <PenaLogo width={124} />
            <Menu />
            <Box
                sx={{
                    display: "flex",
                    ml: "auto",
                }}
            >
                <Drawers />
                <IconButton sx={{ p: 0, ml: "8px" }}>
                    <WalletIcon color={theme.palette.grey2.main} bgcolor="#F2F3F7" />
                </IconButton>
                <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>
                <CustomAvatar sx={{ ml: "27px", backgroundColor: theme.palette.orange.main, height: "36px", width: "36px" }} />
                <IconButton
                    onClick={handleLogoutClick}
                    sx={{ ml: "20px", bgcolor: "#F2F3F7", borderRadius: "6px", height: "36px", width: "36px" }}
                >
                    <LogoutIcon />
                </IconButton>
            </Box>
        </Container>
    ) : (
        <>
            <SectionWrapper
                component="nav"
                maxWidth="lg"
                outerContainerSx={{
                    backgroundColor: theme.palette.lightPurple.main,
                    // borderBottom: "1px solid #E3E3E3",
                }}
                sx={{
                    px: "20px",
                    display: "flex",
                    justifyContent: "space-between",
                    height: "80px",
                    alignItems: "center",
                    gap: "50px",
                }}
            >
                <PenaLogo width={150} />
                <Menu />
                <Button
                    component={Link}
                    to={user ? "/tariffs" : "/signin"}
                    state={user ? undefined : { backgroundLocation: location }}
                    variant="outlined"
                    sx={{
                        px: "18px",
                        py: "10px",
                        borderColor: "white",
                        borderRadius: "8px",
                        whiteSpace: "nowrap",
                        minWidth: "180px",
                    }}
                >
                    Личный кабинет
                </Button>
            </SectionWrapper>
            <Divider sx={{ bgcolor: "#E3E3E3", borderColor: "#00000000" }} />
        </>
    );
}