import { Link, useLocation, useNavigate } from "react-router-dom";
import {
  Box,
  Button,
  Container,
  IconButton,
  Typography,
  useTheme,
} from "@mui/material";
import SectionWrapper from "../SectionWrapper";
import LogoutIcon from "../icons/LogoutIcon";
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 { clearUserData, useUserStore } from "@root/stores/user";
import { clearAuthToken, getMessageFromFetchError } from "@frontend/kitui";
import { clearCustomTariffs } from "@root/stores/customTariffs";

import { currencyFormatter } from "@root/utils/currencyFormatter";

import walletIcon from "@root/assets/Icons/wallet_icon.svg";

import type { ReactNode } from "react";

interface Props {
  isLoggedIn: boolean;
  children: ReactNode;
}

export default function NavbarFull({ isLoggedIn, children }: Props) {
  const theme = useTheme();
  const navigate = useNavigate();
  const location = useLocation();
  const user = useUserStore((state) => state.user);
  const cash = useUserStore((state) => state.userAccount?.wallet.cash) ?? 0;

  async function handleLogoutClick() {
    try {
      await logout();
      clearAuthToken();
      clearUserData();
      clearCustomTariffs();
      navigate("/");
    } catch (error: any) {
      const message = getMessageFromFetchError(error, "Не удалось выйти");
      if (message) enqueueSnackbar(message);
    }
  }

  return (
    <Box>
      {isLoggedIn ? (
        <Container
          component="nav"
          disableGutters
          maxWidth={false}
          sx={{
            zIndex: 1,
            position: "fixed",
            top: "0",
            px: "16px",
            display: "flex",
            height: "80px",
            alignItems: "center",
            gap: "60px",
            bgcolor: "white",
            borderBottom: "1px solid #E3E3E3",
          }}
        >
          <Link to="/">
            <PenaLogo width={124} />
          </Link>
          <Menu />
          <Box sx={{ display: "flex", ml: "auto" }}>
            <Drawers />
            <IconButton
              sx={{
                display: "flex",
                alignItems: "center",
                ml: "20px",
                bgcolor: "#F2F3F7",
                borderRadius: "6px",
                height: "36px",
                width: "36px",
              }}
              onClick={() => navigate("/wallet")}
            >
              <img src={walletIcon} alt="wallet" />
            </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}
              >
                {currencyFormatter.format(cash / 100)}
              </Typography>
            </Box>
            <CustomAvatar />
            <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>
        </>
      )}
      <Box>{children}</Box>
    </Box>
  );
}