import { Box, Container, IconButton, Typography, useTheme, useMediaQuery } from "@mui/material";
import NavMenuItem from "./NavMenuItem";
import Logotip from "../../pages/Landing/images/icons/QuizLogo";
import WalletIcon from "@icons/WalletIcon";
import CustomAvatar from "./Avatar";
import { Burger } from "@icons/Burger";
import { clearAuthToken } from "@frontend/kitui";
import { logout } from "@api/auth";
import { Link, useNavigate } from "react-router-dom";
import { enqueueSnackbar } from "notistack";
import { clearUserData } from "@root/user";
import { LogoutButton } from "@ui_kit/LogoutButton";

export default function HeaderFull() {
  const theme = useTheme();
  const navigate = useNavigate();
  const isTablet = useMediaQuery(theme.breakpoints.down(1000));
  const isMobile = useMediaQuery(theme.breakpoints.down(500));

  async function handleLogoutClick() {
    const [, logoutError] = await logout();

    if (logoutError) {
      return enqueueSnackbar(logoutError);
    }

    clearAuthToken();
    clearUserData();
    navigate("/");
  }

  return (
    <Container
      component="nav"
      disableGutters
      maxWidth={false}
      sx={{
        px: "16px",
        display: "flex",
        height: "80px",
        alignItems: "center",
        gap: isTablet ? "20px" : "60px",
        flexDirection: isMobile ? "row-reverse" : "row",
        justifyContent: isMobile ? "space-between" : "center",
        bgcolor: "white",
        borderBottom: "1px solid #E3E3E3",
      }}
    >
      {isTablet && (
        <Burger
          // onClick={() => setMobileSidebar(!mobileSidebar)}
          style={{ fontSize: "30px", color: "#000000", cursor: "pointer" }}
        />
      )}
      <Link to="/">
        <Logotip width={124} />
      </Link>
      {!isTablet && (
        <Box
          sx={{
            display: "flex",
            gap: "30px",
            overflow: "hidden",
          }}
        >
          {/* <NavMenuItem text="Квизы" />
          <NavMenuItem text="Меню 2" isActive />
          <NavMenuItem text="Меню 3" />
          <NavMenuItem text="Меню 4" />
          <NavMenuItem text="Меню 5" />
          <NavMenuItem text="Меню 1" />
          <NavMenuItem text="Меню 2" /> */}
        </Box>
      )}
      <Box sx={{ display: isMobile ? "none" : "flex", ml: "auto" }}>
        {/* {!isTablet && (
          <>
            <IconButton sx={{ p: 0 }}>
              <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>
          </>
        )} */}
        {!isMobile && (
          <>
            {/* <CustomAvatar
              sx={{
                ml: "27px",
                backgroundColor: theme.palette.orange.main,
                height: "36px",
                width: "36px",
              }}
            /> */}
            <LogoutButton
              onClick={handleLogoutClick}
              sx={{
                ml: "20px",
              }}
            />
          </>
        )}
      </Box>
    </Container>
  );
}