import Stepper from "@ui_kit/Stepper";
import SwitchStepPages from "@ui_kit/switchStepPages";
import React, { useState } from "react";
import PenaLogo from "@ui_kit/PenaLogo";
import {
  Box,
  Button,
  Container,
  FormControl,
  IconButton,
  TextField,
  useMediaQuery,
  useTheme,
} from "@mui/material";
import { Link } from "react-router-dom";
import BackArrowIcon from "@icons/BackArrowIcon";
import NavMenuItem from "@ui_kit/Header/NavMenuItem";
import EyeIcon from "@icons/EyeIcon";
import CustomAvatar from "@ui_kit/Header/Avatar";
import Sidebar from "@ui_kit/Sidebar";
import { quizStore } from "@root/quizes";
import { useParams } from "react-router-dom";
import { Burger } from "@icons/Burger";
import { PenaLogoIcon } from "@icons/PenaLogoIcon";
import { SidebarMobile } from "./Sidebar/SidebarMobile";

const DESCRIPTIONS = [
  "Настройка стартовой страницы",
  "Задайте вопросы",
  "Настройте авторезультаты",
  "Настройте форму контактов",
  "Установите квиз",
  "Запустите рекламу",
] as const;

export default function StartPage() {
  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 isMobile = useMediaQuery(theme.breakpoints.down(660));

  const [mobileSidebar, setMobileSidebar] = useState<boolean>(false);

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

  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 ? (
            <PenaLogoIcon style={{ fontSize: "39px", color: "white" }} />
          ) : (
            <PenaLogo width={124} />
          )}
        </Link>
        <Box
          sx={{
            display: isMobile ? "none" : "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 ? (
          <Box
            sx={{
              display: "flex",
              ml: "auto",
            }}
          >
            {isMobile ? (
              <Burger
                onClick={() => setMobileSidebar(!mobileSidebar)}
                style={{ fontSize: "30px", color: "white", cursor: "pointer" }}
              />
            ) : (
              <CustomAvatar
                sx={{
                  ml: "11px",
                  backgroundColor: theme.palette.orange.main,
                  height: "36px",
                  width: "36px",
                }}
              />
            )}
          </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",
              }}
            >
              <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>

      <Box
        sx={{
          display: isMobile ? "block" : "flex",
        }}
      >
        {isMobile ? <SidebarMobile open={mobileSidebar} /> : <Sidebar />}
        <Box
          sx={{
            background: theme.palette.background.default,
            width: "100%",
            padding: isMobile ? "16px" : "25px",
            height: "calc(100vh - 80px)",
            overflow: "auto",
            boxSizing: "border-box",
          }}
        >
          <Stepper
            activeStep={activeStep}
            desc={DESCRIPTIONS[activeStep - 1]}
          />
          <SwitchStepPages
            activeStep={activeStep}
            quizType={listQuizes[params].config.type}
            startpage={listQuizes[params].startpage}
            createResult={listQuizes[params].createResult}
          />
        </Box>
      </Box>
    </>
  );
}