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

import { QuestionsList } from "./QuestionsList";
import { updateOpenBranchingPanel } from "@root/uiTools/actions";
import { useQuestionsStore } from "@root/questions/store";
import { useRef } from "react";
import { useUiTools } from "@root/uiTools/store";

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));
  const ref = useRef();

  return !isTablet || openBranchingPage ? (
    <Box sx={{ userSelect: "none", maxWidth: "350px", width: "100%" }}>
      <Box
        sx={{
          display: "flex",
          alignItems: "center",
          gap: "15px",
          padding: "18px",
          background: "#fff",
          borderRadius: "12px",
          boxShadow: "0px 10px 30px #e7e7e7",
        }}
      >
        <Switch
          checked={openBranchingPage}
          onChange={setOpenBranchingPage}
          sx={{
            width: 50,
            height: 30,
            padding: 0,
            "& .MuiSwitch-switchBase": {
              padding: 0,
              margin: "2px",
              transitionDuration: "300ms",
              "&.Mui-checked": {
                transform: "translateX(20px)",
                color: theme.palette.brightPurple.main,
                "& + .MuiSwitch-track": {
                  backgroundColor: "#E8DCF9",
                  opacity: 1,
                  border: 0,
                },
                "&.Mui-disabled + .MuiSwitch-track": { opacity: 0.5 },
              },
              "&.Mui-disabled .MuiSwitch-thumb": {
                color:
                  theme.palette.mode === "light"
                    ? theme.palette.grey[100]
                    : theme.palette.grey[600],
              },
              "&.Mui-disabled + .MuiSwitch-track": {
                opacity: theme.palette.mode === "light" ? 0.7 : 0.3,
              },
            },
            "& .MuiSwitch-thumb": {
              boxSizing: "border-box",
              width: 25,
              height: 25,
            },
            "& .MuiSwitch-track": {
              borderRadius: 13,
              backgroundColor:
                theme.palette.mode === "light" ? "#E9E9EA" : "#39393D",
              opacity: 1,
              transition: theme.transitions.create(["background-color"], {
                duration: 500,
              }),
            },
          }}
        />
        <Box>
          <Typography ref={ref} sx={{ fontWeight: "bold", color: "#4D4D4D" }}>
            Логика ветвления
          </Typography>
          <Typography sx={{ color: "#4D4D4D", fontSize: "12px" }}>
            Настройте связи между вопросами
          </Typography>
        </Box>
      </Box>
      {openBranchingPage && <QuestionsList setOpenBranchingPage={setOpenBranchingPage}/>}
    </Box>
  ) : (
    <></>
  );
};