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

export default function Header() {
  const { listQuizes, updateQuizesList, removeQuiz, createBlank } = quizStore();
  const params = Number(useParams().quizId);
  const activeStep = listQuizes[params].step;
  const theme = useTheme();
  const isTablet = useMediaQuery(theme.breakpoints.down(1000));

  const handleNext = () => {
    updateQuizesList(params, { step: listQuizes[params].step + 1 });
  };

  const handleBack = () => {
    let result = listQuizes[params].step - 1;
    updateQuizesList(params, { step: result ? result : 0 });
  };

  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,
      }}
    >
      <PenaLogo width={124} />
      <Box
        sx={{
          display: "flex",
          alignItems: "center",
          ml: "37px",
        }}
      >
        <IconButton sx={{ p: "6px" }} onClick={() => handleBack()}>
          <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: "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",
            }}
          >
            <Button
              variant="outlined"
              startIcon={<EyeIcon />}
              sx={{
                color: theme.palette.brightPurple.main,
                fontSize: "14px",
                lineHeight: "18px",
                height: "34px",
                "& .MuiButton-startIcon": {
                  mr: "3px",
                },
              }}
            >
              Предпросмотр
            </Button>
            <Button
              variant="contained"
              sx={{
                fontSize: "14px",
                lineHeight: "18px",
                height: "34px",
              }}
            >
              Опубликовать
            </Button>
            <CustomAvatar
              sx={{ ml: "11px", backgroundColor: theme.palette.orange.main, height: "36px", width: "36px" }}
            />
          </Box>
        </>
      )}
    </Container>
  );
}