import { useEffect, useRef, useState } from "react";
// import { useBlocker } from "react-router-dom";
import {
  Box,
  Button,
  Typography,
  Paper,
  Modal,
  TextField,
} from "@mui/material";
import { incrementCurrentStep } from "@root/quizes/actions";
import CustomWrapper from "@ui_kit/CustomWrapper";
import { DescriptionForm } from "./DescriptionForm/DescriptionForm";
import { ResultListForm } from "./ResultListForm";
import { SettingForm } from "./SettingForm";
import { WhenCard } from "./cards/WhenCard";
import { ResultCard, checkEmptyData } from "./cards/ResultCard";
import { EmailSettingsCard } from "./cards/EmailSettingsCard";
import { useCurrentQuiz } from "@root/quizes/hooks";
import { useQuestionsStore } from "@root/questions/store";
import { deleteQuestion } from "@root/questions/actions";
import { QuizQuestionResult } from "@model/questionTypes/result";

import IconPlus from "@icons/IconPlus";
import Info from "@icons/Info";
import Plus from "@icons/Plus";
import ArrowLeft from "@icons/questionsPage/arrowLeft";

export const ResultSettings = () => {
  const { questions } = useQuestionsStore();
  const quiz = useCurrentQuiz();
  const results = useQuestionsStore().questions.filter(
    (q): q is QuizQuestionResult => q.type === "result",
  );
  const [quizExpand, setQuizExpand] = useState(true);
  const [resultContract, setResultContract] = useState(true);
  const [triggerExit, setTriggerExit] = useState<{
    follow: boolean;
    path: string;
  }>({ follow: false, path: "" });
  const [openNotificationModal, setOpenNotificationModal] =
    useState<boolean>(true);
  const isReadyToLeaveRef = useRef(true);
  // const blocker = useBlocker(false);

  useEffect(
    function calcIsReadyToLeave() {
      let isReadyToLeave = true;
      results.forEach((result) => {
        if (checkEmptyData({ resultData: result })) {
          isReadyToLeave = false;
        }
      });
      isReadyToLeaveRef.current = isReadyToLeave;
    },
    [results],
  );

  useEffect(() => {
    return () => {
      if (!isReadyToLeaveRef.current && window.location.pathname !== "/edit") {
        setOpenNotificationModal(true);
      }
    };
  }, []);

  const cnsl = results.filter((q) => q.content.usage);

  const shouldBlock = true; // Replace this

  // useEffect(() => {
  //   if (shouldBlock) {
  //     blocker.proceed?.()
  //   }
  // }, [shouldBlock]);

  const leavePage = (leave: boolean) => {
    if (leave) {
    }

    setOpenNotificationModal(false);
  };

  return (
    <Box sx={{ maxWidth: "796px" }}>
      <Box
        sx={{
          display: "flex",
          alignItems: "center",
          margin: "60px 0 40px 0",
        }}
      >
        <Typography variant="h5">Настройки результатов</Typography>
        <Info />
        <Button
          disableRipple
          sx={{
            ml: "auto",
            width: "73px",
            height: "19px",
            color: "#7E2AEA",
            textDecoration: "underline",
            fontSize: "16px",
            "&:hover": {
              background: "none",
              textDecoration: "underline",
            },
          }}
          variant="text"
          onClick={() => setQuizExpand(!quizExpand)}
        >
          Свернуть
        </Button>
      </Box>

      <WhenCard quizExpand={quizExpand} />
      {quiz.config.resultInfo.when === "email" && (
        <EmailSettingsCard quizExpand={quizExpand} />
      )}

      <Box
        sx={{ display: "flex", alignItems: "center", mb: "15px", mt: "15px" }}
      >
        <Typography variant="p1" sx={{ color: "#4D4D4D", fontSize: "14px" }}>
          Создайте результат
        </Typography>
        <Button
          disableRipple
          sx={{
            ml: "auto",
            height: "19px",
            color: "#7E2AEA",
            textDecoration: "underline",
            fontSize: "16px",

            "&:hover": {
              background: "none",
              textDecoration: "underline",
            },
          }}
          variant="text"
          onClick={() => setResultContract(!resultContract)}
        >
          Развернуть все
        </Button>
      </Box>

      {cnsl.map((resultQuestion) => (
        <ResultCard
          resultContract={resultContract}
          resultData={resultQuestion}
          key={resultQuestion.id}
        />
      ))}
      <Modal
        open={false}
        // onClose={handleClose}
        aria-labelledby="modal-modal-title"
        aria-describedby="modal-modal-description"
      >
        <></>
      </Modal>
    </Box>
  );
};