import { quizApi } from "@api/quiz";
import { Box, IconButton, useMediaQuery, useTheme } from "@mui/material";
import {
  resetEditConfig,
  setQuizes,
  updateQuiz,
  setCurrentStep,
} from "@root/quizes/actions";
import { useCurrentQuiz } from "@root/quizes/hooks";
import { useQuizStore } from "@root/quizes/store";
import Sidebar from "@ui_kit/Sidebar";
import { enqueueSnackbar } from "notistack";
import React, { useEffect, useState } from "react";
import { useNavigate } from "react-router-dom";
import { useDebouncedCallback } from "use-debounce";
import { SidebarMobile } from "../startPage/Sidebar/SidebarMobile";
import {
  cleanQuestions,
  createResult,
  setQuestions,
} from "@root/questions/actions";
import {
  updateCanCreatePublic,
  updateModalInfoWhyCantCreate,
  setShowConfirmLeaveModal,
  updateSomeWorkBackend,
} from "@root/uiTools/actions";
import { useQuestionsStore } from "@root/questions/store";
import { questionApi } from "@api/question";
import { useUiTools } from "@root/uiTools/store";

import { clearUserData } from "@root/user";
import { clearAuthToken } from "@frontend/kitui";
import { logout } from "@api/auth";
import { AnyTypedQuizQuestion } from "@model/questionTypes/shared";
import { ModalInfoWhyCantCreate } from "../startPage/ModalInfoWhyCantCreate";
import { ConfirmLeaveModal } from "../startPage/ConfirmLeaveModal";
import { checkQuestionHint } from "@utils/checkQuestionHint";
import { Header } from "../startPage/Header";
import { DesignFilling } from "./DesignFilling";
import { toggleQuizPreview } from "@root/quizPreview";
import VisibilityIcon from "@mui/icons-material/Visibility";
import { createPortal } from "react-dom";
import QuizPreview from "@ui_kit/QuizPreview/QuizPreview";

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

  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) return <></>;
  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>
      <ModalInfoWhyCantCreate />
      <ConfirmLeaveModal
        open={showConfirmLeaveModal}
        follow={followNewPage}
        cancel={() => setShowConfirmLeaveModal(false)}
      />
    </>
  );
};