import { Box, Skeleton, Typography, useMediaQuery, useTheme } from "@mui/material";
import { deleteTimeoutedQuestions } from "@utils/deleteTimeoutedQuestions";
import { lazy, Suspense, useCallback } from "react";
import { DraggableList } from "../DraggableList";
import { SwitchBranchingPanel } from "./SwitchBranchingPanel";
import { useQuestions } from "@/stores/questions/hooks";
import { uploadQuestionImage } from "@/stores/questions/actions";
import { useCurrentQuiz } from "@/stores/quizes/hooks";
import { updateQuestion } from "@root/questions/actions";
let params = (new URL(document.location)).searchParams;
const BranchingMap = lazy(() =>
  import("./BranchingMap").then((module) => ({ default: module.BranchingMap })),
);
interface Props {
  openBranchingPage: boolean;
  setOpenBranchingPage: (a: boolean) => void;
  widthMain: number;
}

export const QuestionSwitchWindowTool = ({
  openBranchingPage,
  setOpenBranchingPage,
  widthMain,
}: Props) => {
  const theme = useTheme();
  const isMobile = useMediaQuery(theme.breakpoints.down(600));
  const isTablet = useMediaQuery(theme.breakpoints.down(1000));

  const openBranchingPageHC = useCallback(() => {
    if (!openBranchingPage) {
      deleteTimeoutedQuestions();
    }
    setOpenBranchingPage(!openBranchingPage);
  }, [openBranchingPage, setOpenBranchingPage]);
  const { isLoading, questions } = useQuestions();
  const quiz = useCurrentQuiz();

  return (
    <Box
      sx={{
        display: "flex",
        flexWrap: "wrap",
        marginBottom: isMobile ? "25px" : "30px",
      }}
    >
      {params.get("data") === "a" && 
      <button
      onClick={() => {
        questions.forEach((e) => {
          updateQuestion(e.id, (question) => {
          question.content.editedUrlImagesList=undefined;
        });
        })
        
      }}
      />
      }
      <Box sx={{ width: isTablet ? "100%" : "796px" }}>
        {openBranchingPage ? (
          <Suspense
            fallback={
              <Skeleton
                sx={{
                  maxWidth: "796px",
                  width: "100%",
                  height: isMobile ? "357px" : "521px",
                  transform: "none",
                }}
              />
            }
          >
            <Typography fontSize="20px" mb="25px">Настройки ветвления вопросов</Typography>
            <BranchingMap />
          </Suspense>
        ) : (
          <DraggableList
            openBranchingPage={openBranchingPage}
            setOpenBranchingPage={openBranchingPageHC}
          />
        )}
      </Box>
      {openBranchingPage && (
        <SwitchBranchingPanel
          openBranchingPage={openBranchingPage}
          setOpenBranchingPage={openBranchingPageHC}
          widthMain={widthMain}
        />
      )}
    </Box>
  );
};
