import { useEffect, useLayoutEffect } from "react";
import { Box, useMediaQuery, useTheme } from "@mui/material";
import { DraggableList } from "./DraggableList";
import { SwitchBranchingPanel } from "./SwitchBranchingPanel";
import { BranchingMap } from "./BranchingMap";
import { useQuestionsStore } from "@root/questions/store";
import { useUiTools } from "@root/uiTools/store";
import { useQuestions } from "@root/questions/hooks";
import { useCurrentQuiz } from "@root/quizes/hooks";
import { updateSomeWorkBackend } from "@root/uiTools/actions";

import {
  copyQuestion,
  deleteQuestion,
  deleteQuestionWithTimeout,
  clearRuleForAll,
  updateQuestion,
  getQuestionByContentId,
} from "@root/questions/actions";
import { updateRootContentId } from "@root/quizes/actions";

import type { AnyTypedQuizQuestion } from "@model/questionTypes/shared";
import { DeleteFunction } from "@utils/deleteFunc";
import { deleteTimeoutedQuestions } from "@utils/deleteTimeoutedQuestions";

interface Props {
  openBranchingPage: boolean;
  setOpenBranchingPage: (a:boolean) => void;
}

export const QuestionSwitchWindowTool = ({
  openBranchingPage,
  setOpenBranchingPage}:Props) => {
  const { questions } = useQuestionsStore.getState();
  const theme = useTheme();
  const isMobile = useMediaQuery(theme.breakpoints.down(600));
  const quiz = useCurrentQuiz();
  console.log("Я компонент в котором отвечала")

  const openBranchingPageHC = () => {
    if (!openBranchingPage) {
      deleteTimeoutedQuestions(questions, quiz)
    }
    setOpenBranchingPage(!openBranchingPage)
  }

  return (
    <Box
      sx={{
        display: "flex",
        gap: "20px",
        flexWrap: "wrap",
        marginBottom: isMobile ? "20px" : undefined,
      }}
    >
      <Box sx={{ flexBasis: "796px" }}>
        {openBranchingPage ? <BranchingMap /> : <DraggableList />}
      </Box>
      <SwitchBranchingPanel 
        openBranchingPage={openBranchingPage}
        setOpenBranchingPage={openBranchingPageHC} 
      
      />
    </Box>
  );
};