import {
  Box,
  Container,
  IconButton,
  Typography,
  useTheme,
  useMediaQuery,
} from "@mui/material";
import LogoutIcon from "@icons/LogoutIcon";
import NavMenuItem from "./NavMenuItem";
import PenaLogo from "../PenaLogo";
import WalletIcon from "@icons/WalletIcon";
import CustomAvatar from "./Avatar";
import { Burger } from "@icons/Burger";

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

  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" }}
        />
      )}
      <PenaLogo width={124} />
      {!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",
              }}
            />
            <IconButton
              sx={{
                ml: "20px",
                bgcolor: "#F2F3F7",
                borderRadius: "6px",
                height: "36px",
                width: "36px",
              }}
            >
              <LogoutIcon />
            </IconButton>
          </>
        )}
      </Box>
    </Container>
  );
}