import {
  Box,
  Typography,
  Switch,
  useTheme,
  Button,
  useMediaQuery,
} from "@mui/material";

import { QuestionsList } from "./QuestionsList";
import { PanelSwitchQuestionListGraph } from "@ui_kit/Toolbars/PanelSwitchQuestionListGraph";
interface Props {
  openBranchingPage: boolean;
  setOpenBranchingPage: () => void;
}

export const SwitchBranchingPanel = ({
  openBranchingPage,
  setOpenBranchingPage,
}: Props) => {
  const theme = useTheme();
  const isMobile = useMediaQuery(theme.breakpoints.down(660));
  const isTablet = useMediaQuery(theme.breakpoints.down(1446));

  return openBranchingPage ? (
    <Box sx={{ userSelect: "none", maxWidth: "350px", width: "100%" }}>
      {isTablet || (
        <PanelSwitchQuestionListGraph
          openBranchingPage={openBranchingPage}
          setOpenBranchingPage={setOpenBranchingPage}
        />
      )}
      {openBranchingPage && (
        <QuestionsList setOpenBranchingPage={setOpenBranchingPage} />
      )}
    </Box>
  ) : (
    <></>
  );
};