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";


export const QuestionSwitchWindowTool = () => {
    const {questions} = useQuestionsStore.getState()
    const {openBranchingPanel} = useUiTools()
    const theme = useTheme();
    const isMobile = useMediaQuery(theme.breakpoints.down(600));
    console.log("questions ", questions)
    console.log("rules ", questions.filter((q) => q.type !== null).map((q) => ({id: q.content.id, rule: q.content.rule})))
    return (
                <Box sx={{ display: "flex", gap: "20px", flexWrap: "wrap", marginBottom: isMobile ? "20px" : undefined  }}>
                <Box sx={{ flexBasis: "796px" }}>
                    {openBranchingPanel? <BranchingMap /> : <DraggableList />}
                </Box>
                <SwitchBranchingPanel
                />
            </Box>
    )
}