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";


export const BranchingMap = () => {
  const quiz = useCurrentQuiz();
  const { dragQuestionId } = useQuestionsStore()
  const [openedModalQuestionsId, setOpenedModalQuestionsId] = useState<string>()

  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: dragQuestionId === null ? "none" : "#7e2aea 2px dashed"
        }}
      >

        {
          quiz?.config.haveRoot ?
          <CsComponent />
          :
          <FirstNodeField setOpenedModalQuestionsId={setOpenedModalQuestionsId} />
        
        }
      </Box>
  );
};