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

import NavMenuItem from "../NavMenuItem";
import SectionWrapper from "../SectionWrapper";

import { basketStore } from "@root/stores/BasketStore";
import { IconsCreate } from "@root/lib/IconsCreate";
import { authStore } from "@stores/makeRequest";

import BasketIcon from "../../assets/Icons/BasketIcon.svg";
import LogoutIcon from "../icons/LogoutIcon";
import WalletIcon from "../icons/WalletIcon";
import CustomAvatar from "./Avatar";
import PenaLogo from "../PenaLogo";
import Icon from "@mui/material/Icon";

interface Props {
  isLoggedIn: boolean;
}

export default function NavbarFull({ isLoggedIn }: Props) {
  const theme = useTheme();
  const navigate = useNavigate();
  const { clearToken } = authStore();
  const [basketQuantity, setBasketQuantity] = useState<number>(0);

  const { templ, squiz, reducer } = basketStore();

  useEffect(() => {
    setBasketQuantity(Object.keys(templ).length + Object.keys(squiz).length);
  });

  async function handleLogoutClick() {
    clearToken();
  }

  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} />
      <Box
        sx={{
          display: "flex",
          gap: "30px",
          overflow: "hidden",
        }}
      >
        <NavMenuItem text="Меню 1" />
        <NavMenuItem text="Меню 2" isActive />
        <NavMenuItem text="Меню 3" />
        <NavMenuItem text="Меню 4" />
        <NavMenuItem text="Меню 5" />
        <NavMenuItem text="Меню 1" />
        <NavMenuItem text="Меню 2" />
      </Box>
      <Box
        sx={{
          display: "flex",
          ml: "auto",
        }}
      >
        <IconButton onClick={() => navigate("/basket")} sx={{ p: 0 }}>
          <Typography component="div" sx={{ position: "absolute" }}>
            <IconsCreate svg={BasketIcon} bgcolor="#F2F3F7" />
          </Typography>
          {basketQuantity && (
            <Icon
              sx={{
                position: "relative",
                left: "8px",
                bottom: "7px",

                width: "16px",
                height: "16px",
                backgroundColor: "#7E2AEA",
                borderRadius: "12px",
              }}
            >
              <Typography
                component="div"
                sx={{
                  display: "flex",
                  fontSize: "12px",
                  mt: "4.5px",
                  width: "100%",
                  height: "9px",
                  color: "white",
                  alignItems: "center",
                  justifyContent: "center",
                }}
              >
                {basketQuantity}
              </Typography>
            </Icon>
          )}
        </IconButton>
        <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",
      }}
    >
      <Box
        sx={{
          display: "flex",
          gap: "30px",
          overflow: "hidden",
        }}
      >
        <NavMenuItem text="Меню 1" />
        <NavMenuItem text="Меню 2" isActive />
        <NavMenuItem text="Меню 3" />
        <NavMenuItem text="Меню 4" />
        <NavMenuItem text="Меню 5" />
        <NavMenuItem text="Меню 1" />
        <NavMenuItem text="Меню 2" />
      </Box>
      <Button
        variant="outlined"
        sx={{
          px: "18px",
          py: "10px",
          borderColor: "white",
          borderRadius: "8px",
        }}
      >
        Личный кабинет
      </Button>
    </SectionWrapper>
  );
}