import { quizApi } from "@api/quiz";
import { Box, useMediaQuery, useTheme, Skeleton } from "@mui/material";
import { setQuizes, setCurrentStep } from "@root/quizes/actions";
import { useCurrentQuiz } from "@root/quizes/hooks";
import { useQuizStore } from "@root/quizes/store";
import Sidebar from "@ui_kit/Sidebar";
import { useEffect, useState } from "react";
import { useNavigate } from "react-router-dom";
import { SidebarMobile } from "../startPage/Sidebar/SidebarMobile";
import { cleanQuestions, setQuestions } from "@root/questions/actions";
import {
  updateModalInfoWhyCantCreate,
  setShowConfirmLeaveModal,
  updateSomeWorkBackend,
} from "@root/uiTools/actions";
import { questionApi } from "@api/question";
import { useUiTools } from "@root/uiTools/store";

import { ConfirmLeaveModal } from "../startPage/ConfirmLeaveModal";
import { Header } from "../startPage/Header";
import { DesignFilling } from "./DesignFilling";
import { createPortal } from "react-dom";
import QuizPreview from "@ui_kit/QuizPreview/QuizPreview";

export const DesignPage = () => {
  const quiz = useCurrentQuiz();
  const { editQuizId } = useQuizStore();

  useEffect(() => {
    const getData = async () => {
      const quizes = await quizApi.getList();
      setQuizes(quizes);
      if (editQuizId) {
        const questions = await questionApi.getList({ quiz_id: editQuizId });
        setQuestions(questions);
      }
    };
    getData();
  }, []);

  const { showConfirmLeaveModal } = useUiTools();
  const theme = useTheme();
  const navigate = useNavigate();
  const currentStep = useQuizStore((state) => state.currentStep);
  const isMobile = useMediaQuery(theme.breakpoints.down(660));
  const [mobileSidebar, setMobileSidebar] = useState<boolean>(false);
  const [nextStep, setNextStep] = useState<number>(0);

  useEffect(
    () => () => {
      cleanQuestions();
      updateModalInfoWhyCantCreate(false);
      updateSomeWorkBackend(false);
    },
    [],
  );

  useEffect(() => {
    if (editQuizId === null) navigate("/list");
  }, [navigate, editQuizId]);

  const followNewPage = () => {
    setShowConfirmLeaveModal(false);
    setCurrentStep(nextStep);
  };

  const changePage = (index: number) => {
    if (currentStep === 2) {
      setNextStep(index);
      setShowConfirmLeaveModal(true);

      return;
    }

    setCurrentStep(index);
  };

  console.log(quiz);
  if (quiz === undefined)
    return (
      <Skeleton sx={{ width: "100vw", height: "100vh", transform: "none" }} />
    );
  return (
    <>
      {/*<Header setMobileSidebar={setMobileSidebar} />*/}
      <Box sx={{ display: "flex", flexDirection: isMobile ? "column" : "row" }}>
        {/*{isMobile ? (*/}
        {/*  <SidebarMobile open={mobileSidebar} changePage={changePage} />*/}
        {/*) : (*/}
        {/*  <Sidebar changePage={changePage} />*/}
        {/*)}*/}
        <DesignFilling />
        {createPortal(<QuizPreview />, document.body)}
      </Box>
      <ConfirmLeaveModal
        open={showConfirmLeaveModal}
        follow={followNewPage}
        cancel={() => setShowConfirmLeaveModal(false)}
      />
    </>
  );
};