import { Box } from "@mui/material";
import { FirstNodeField } from "./FirstNodeField";
import { CsComponent } from "./CsComponent";
import { useQuestionsStore } from "@root/questions/store"
import { useCurrentQuiz } from "@root/quizes/hooks";
import { useState } from "react";
import {BranchingQuestionsModal} from "../BranchingQuestionsModal"


export const BranchingMap = () => {
  const quiz = useCurrentQuiz();
  const { dragQuestionContentId } = useQuestionsStore()
  const [modalQuestionParentContentId, setModalQuestionParentContentId] = useState<string>("")
  const [modalQuestionTargetContentId, setModalQuestionTargetContentId] = useState<string>("")
  const [openedModalQuestions, setOpenedModalQuestions] = useState<boolean>(false)

 

  return (
      <Box
        id="cytoscape-container"
        sx={{
          overflow: "hidden",
          padding: "20px",
          background: "#FFFFFF",
          borderRadius: "12px",
          boxShadow: "0px 8px 24px rgba(210, 208, 225, 0.4)",
          marginBottom: "40px",
          height: "521px",
          border: dragQuestionContentId === null ? "none" : "#7e2aea 2px dashed"
        }}
      >

        {
          quiz?.config.haveRoot ?
          <CsComponent modalQuestionParentContentId={modalQuestionParentContentId} modalQuestionTargetContentId={modalQuestionTargetContentId} setOpenedModalQuestions={setOpenedModalQuestions} setModalQuestionParentContentId={setModalQuestionParentContentId} setModalQuestionTargetContentId={setModalQuestionTargetContentId}/>
          :
          <FirstNodeField setOpenedModalQuestions={setOpenedModalQuestions} modalQuestionTargetContentId={modalQuestionTargetContentId}/>
        }
        <BranchingQuestionsModal openedModalQuestions={openedModalQuestions} setOpenedModalQuestions={setOpenedModalQuestions} setModalQuestionTargetContentId={setModalQuestionTargetContentId} />
      </Box>
  );
};