import BackArrowIcon from "@icons/BackArrowIcon";
import EyeIcon from "@icons/EyeIcon";
import { Box, Button, Container, FormControl, IconButton, TextField, useMediaQuery, useTheme } from "@mui/material";
import { decrementCurrentStep } from "@root/quizes/actions";
import PenaLogo from "../PenaLogo";
import CustomAvatar from "./Avatar";
import NavMenuItem from "./NavMenuItem";
import { Link } from "react-router-dom";

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

  return (
    <Container
      component="nav"
      maxWidth={false}
      disableGutters
      sx={{
        px: "16px",
        display: "flex",
        height: "80px",
        alignItems: "center",
        bgcolor: "white",
        borderBottom: "1px solid #E3E3E3",
        zIndex: theme.zIndex.drawer + 1,
      }}
    >
      <Link to="/">
        <PenaLogo width={124} />
      </Link>
      <Box
        sx={{
          display: "flex",
          alignItems: "center",
          ml: "37px",
        }}
      >
        <IconButton sx={{ p: "6px" }} onClick={decrementCurrentStep}>
          <BackArrowIcon />
        </IconButton>
        <FormControl fullWidth variant="standard">
          <TextField
            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 ? null : (
        <>
          <Box
            sx={{
              display: "flex",
              gap: "31px",
              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" }}
            />
          </Box>
        </>
      )}
    </Container>
  );
}