import { LogoutButton } from "@ui_kit/LogoutButton";
import BackArrowIcon from "@icons/BackArrowIcon";
import { Burger } from "@icons/Burger";

import {
  Box,
  Container,
  FormControl,
  IconButton,
  TextField,
  useMediaQuery,
  useTheme,
} from "@mui/material";
import { updateQuiz } from "@root/quizes/actions";
import { useCurrentQuiz } from "@root/quizes/hooks";
import CustomAvatar from "@ui_kit/Header/Avatar";
import NavMenuItem from "@ui_kit/Header/NavMenuItem";

import { enqueueSnackbar } from "notistack";
import { useState } from "react";
import { Link, useNavigate } from "react-router-dom";

import Logotip from "../Landing/images/icons/QuizLogo";
import { clearUserData } from "@root/user";
import { clearAuthToken } from "@frontend/kitui";
import { logout } from "@api/auth";

type HeaderProps = {
  setMobileSidebar: (callback: (visible: boolean) => boolean) => void;
};

export const Header = ({ setMobileSidebar }: HeaderProps) => {
  const quiz = useCurrentQuiz();
  const theme = useTheme();
  const navigate = useNavigate();
  const isTablet = useMediaQuery(theme.breakpoints.down(1000));
  const isMobile = useMediaQuery(theme.breakpoints.down(660));

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

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

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

  return (
    <Container
      component="nav"
      maxWidth={false}
      disableGutters
      sx={{
        px: "16px",
        display: "flex",
        height: isMobile ? "51px" : "80px",
        alignItems: "center",
        bgcolor: isMobile ? "#333647" : "white",
        borderBottom: "1px solid #E3E3E3",
        zIndex: theme.zIndex.drawer + 1,
      }}
    >
      <Link to="/" style={{ display: "flex" }}>
        {isMobile ? <Logotip width={100} /> : <Logotip width={124} />}
      </Link>
      <Box
        sx={{
          display: isMobile ? "none" : "flex",
          alignItems: "center",
          ml: "37px",
        }}
      >
        <Link to="/list">
          <IconButton sx={{ p: "6px" }}>
            <BackArrowIcon />
          </IconButton>
        </Link>
        <FormControl fullWidth variant="standard">
          <TextField
            // value={quiz.name}
            // onChange={(e) =>
            //   updateQuiz(quiz.id, (quiz) => {
            //     quiz.name = e.target.value;
            //   })
            // }
            fullWidth
            id="project-name"
            placeholder="Название проекта окно"
            sx={{
              width: "270px",
              "& .MuiInputBase-root": {
                height: "34px",
                borderRadius: "8px",
                p: 0,
              },
            }}
            inputProps={{
              sx: {
                height: "20px",
                borderRadius: "8px",
                fontSize: "16px",
                lineHeight: "20px",
                p: "7px",
                color: "black",
                "&::placeholder": {
                  opacity: 1,
                },
              },
            }}
          />
        </FormControl>
      </Box>
      {isTablet ? (
        <Box
          sx={{
            display: "flex",
            ml: "auto",
          }}
        >
          {isMobile ? (
            <Burger
              onClick={() => setMobileSidebar((visible: boolean) => !visible)}
              style={{ fontSize: "30px", color: "white", cursor: "pointer" }}
            />
          ) : (
            <Box>
              {/* <CustomAvatar
                sx={{
                  ml: "11px",
                  backgroundColor: theme.palette.orange.main,
                  height: "36px",
                  width: "36px",
                }}
              /> */}
            </Box>
          )}
        </Box>
      ) : (
        <>
          <Box
            sx={{
              display: "flex",
              gap: "30px",
              overflow: "hidden",
              ml: "20px",
            }}
          >
            {/* <NavMenuItem text="Редактировать" isActive /> */}
            {/* <NavMenuItem text="Заявки" />
            <NavMenuItem text="Аналитика" />
            <NavMenuItem text="История" />
            <NavMenuItem text="Помощь" /> */}
          </Box>
          <Box
            sx={{
              display: "flex",
              ml: "auto",
              gap: "15px",
            }}
          >
            {/* <CustomAvatar
              sx={{
                ml: "11px",
                backgroundColor: theme.palette.orange.main,
                height: "36px",
                width: "36px",
              }}
            /> */}
            <LogoutButton onClick={handleLogoutClick} />
          </Box>
        </>
      )}
    </Container>
  );
};