import { Box, useMediaQuery, useTheme } from "@mui/material";
import { useCurrentQuiz } from "@root/quizes/hooks";
import { useUiTools } from "@root/uiTools/store";
import { BranchingQuestionsModal } from "../BranchingQuestionsModal";
import CsComponent from "./CsComponent";
import { FirstNodeField } from "./FirstNodeField";

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

  return (
    <Box
      sx={{
        overflow: "hidden",
        padding: isMobile ? "15px" : "20px",
        background: theme.palette.common.white,
        borderRadius: "12px",
        boxShadow: "0px 8px 24px rgba(210, 208, 225, 0.4)",
        width: "100%",
        border:
          dragQuestionContentId === null
            ? "none"
            : `${theme.palette.brightPurple.main} 2px dashed`,
      }}
    >
      {quiz?.config.haveRoot ? <CsComponent /> : <FirstNodeField />}
      <BranchingQuestionsModal />
    </Box>
  );
};
