import { Box } from "@mui/material"
import { useEffect, useRef } from "react";
import { updateDragQuestionId, updateQuestion } from "@root/questions/actions"
import { updateRootInfo } from "@root/quizes/actions"
import { useQuestionsStore } from "@root/questions/store"
import { useCurrentQuiz } from "@root/quizes/hooks";
import { enqueueSnackbar } from "notistack";

export const FirstNodeField = () => {
    const { dragQuestionId } = useQuestionsStore()
    const Container = useRef<HTMLDivElement | null>(null);
    const quiz = useCurrentQuiz();


    const newRootNode = () => {
        if (quiz) {
console.log(dragQuestionId)

            if (dragQuestionId) {
                updateRootInfo(quiz?.id, true)
                updateQuestion(dragQuestionId, (question) => question.content.rule.parentId = "root")
            }
        } else {
            enqueueSnackbar("Нет информации о взятом опроснике")
        }
    }

    useEffect(() => {
        Container.current?.addEventListener("mouseup", newRootNode)
        return () => { Container.current?.removeEventListener("mouseup", newRootNode) }
    }, [])

    return (
        <Box
            ref={Container}
            sx={{
                height: "100%",
                width: "100%",
                backgroundColor: "#f2f3f7",
                display: "flex",
                alignItems: "center",
                justifyContent: "center",
                color: "#4d4d4d",
                fontSize: "50px"
            }}
        >
            +
        </Box>
    )
}