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";
import { ToTariffsButton } from "@ui_kit/Toolbars/ToTariffsButton";

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: "row",
        justifyContent: isMobile ? "space-between" : "center",
        bgcolor: "white",
        borderBottom: "1px solid #E3E3E3",
      }}
    >
      <Link to="/">
        <Logotip width={124} />
      </Link>
      <Box sx={{ display: "flex", ml: "auto" }}>
        <ToTariffsButton />
        <LogoutButton
          onClick={handleLogoutClick}
          sx={{
            ml: "20px",
          }}
        />
      </Box>
    </Container>
  );
}