import {
  Box,
  Button,
  Typography,
  useMediaQuery,
  useTheme,
} from "@mui/material";
import {
  clearRuleForAll,
  createResult,
  updateQuestion,
} from "@root/questions/actions";
import { updateRootContentId } from "@root/quizes/actions";
import { useCurrentQuiz } from "@root/quizes/hooks";
import { useQuizStore } from "@root/quizes/store";
import {
  setOpenedModalQuestions,
  updateOpenedModalSettingsId,
} from "@root/uiTools/actions";
import { useUiTools } from "@root/uiTools/store";
import { enqueueSnackbar } from "notistack";
import { useEffect, useLayoutEffect, useRef } from "react";
import { GrayPlus } from "@icons/questionsPage/GrayPlus";

export const FirstNodeField = () => {
  const theme = useTheme();
  const isMobile = useMediaQuery(theme.breakpoints.down(650));
  const quiz = useCurrentQuiz();
  const modalQuestionTargetContentId = useUiTools(
    (state) => state.modalQuestionTargetContentId,
  );

  useLayoutEffect(() => {
    if (!quiz) return;

    updateOpenedModalSettingsId();
    updateRootContentId(quiz.id, "");
    clearRuleForAll();
  }, []);

  const { dragQuestionContentId } = useUiTools();
  const Container = useRef<HTMLDivElement | null>(null);

  const modalOpen = () => setOpenedModalQuestions(true);

  const newRootNode = () => {
    if (quiz) {
      if (dragQuestionContentId) {
        updateRootContentId(quiz?.id, dragQuestionContentId);
        updateQuestion(
          dragQuestionContentId,
          (question) => (question.content.rule.parentId = "root"),
        );
        createResult(useQuizStore.getState().editQuizId, dragQuestionContentId);
      }
    } else {
      enqueueSnackbar("Нет информации о взятом опроснике");
    }
  };

  useEffect(() => {
    Container.current?.addEventListener("pointerup", newRootNode);
    Container.current?.addEventListener("click", modalOpen);
    return () => {
      Container.current?.removeEventListener("pointerup", newRootNode);
      Container.current?.removeEventListener("click", modalOpen);
    };
  }, [dragQuestionContentId]);

  useEffect(() => {
    if (quiz) {
      if (modalQuestionTargetContentId) {
        updateRootContentId(quiz?.id, modalQuestionTargetContentId);
        updateQuestion(
          modalQuestionTargetContentId,
          (question) => (question.content.rule.parentId = "root"),
        );
        createResult(
          useQuizStore.getState().editQuizId,
          modalQuestionTargetContentId,
        );
      }
    } else {
      enqueueSnackbar("Нет информации о взятом опроснике");
    }
  }, [modalQuestionTargetContentId]);

  return (
    <Box
      ref={Container}
      sx={{
        height: isMobile ? "327px" : "481px",
        width: "100%",
        backgroundColor: theme.palette.background.default,
        display: "flex",
        alignItems: "center",
        justifyContent: "center",
        color: theme.palette.grey3.main,
        fontSize: "50px",
        borderRadius: "12px",
        padding: "20px",
      }}
    >
      <Box
        sx={{
          display: "flex",
          flexDirection: "column",
          alignItems: "center",
          gap: "20px",
          width: "275px",
        }}
      >
        <Typography
          sx={{
            color: theme.palette.grey2.main,
            textAlign: "center",
          }}
        >
          Добавьте созданные вопросы и настройте связи между ними
        </Typography>
        <Button
          sx={{
            width: "70px",
            height: "70px",
            borderRadius: "12px",
            background: "rgba(154, 154, 175, 0.09)",
            display: "flex",
            justifyContent: "center",
            alignItems: "center",
          }}
        >
          <GrayPlus />
        </Button>
      </Box>
    </Box>
  );
};
