import { Link, useLocation, useNavigate } from "react-router-dom";
import { useEffect } from "react";
import { Box, Button, Container, 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";
import { getMessageFromFetchError } from "@root/utils/backendMessageHandler";

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) {
      const message = getMessageFromFetchError(error, "Не удалось выйти");
      if (message) enqueueSnackbar(message);
    }
  }

  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>
    </>
  );
}