frontPanel/src/pages/Questions/BranchingModal/BranchingQuestionsModal.tsx

import { useState, useRef, useEffect, useLayoutEffect } from "react";
import {
  Box,
  Button,
  FormControl,
  FormControlLabel,
  Link,
  Modal,
  Radio,
  RadioGroup,
  Tooltip,
  Typography,
  useTheme,
  Checkbox,
  useMediaQuery,
} from "@mui/material";
import {
  AnyTypedQuizQuestion,
  createBranchingRuleMain,
} from "../../../model/questionTypes/shared";
import { Select } from "../Select";

import RadioCheck from "@ui_kit/RadioCheck";
import RadioIcon from "@ui_kit/RadioIcon";
import InfoIcon from "@icons/Info";
import { DeleteIcon } from "@icons/questionsPage/deleteIcon";

import { TypeSwitch, BlockRule } from "./Settings";
import {
  getQuestionById,
  getQuestionByContentId,
  updateQuestion,
} from "@root/questions/actions";
import { updateOpenedModalSettingsId } from "@root/uiTools/actions";
import { useUiTools } from "@root/uiTools/store";
import { enqueueSnackbar } from "notistack";
import TooltipClickInfo from "@ui_kit/Toolbars/TooltipClickInfo";

export default function BranchingQuestions() {
  const theme = useTheme();
  const isMobile = useMediaQuery(theme.breakpoints.down(650));
  const { openedModalSettingsId } = useUiTools();
  const [targetQuestion, setTargetQuestion] =
    useState<AnyTypedQuizQuestion | null>(
      getQuestionById(openedModalSettingsId) ||
        getQuestionByContentId(openedModalSettingsId),
    );
  const [parentQuestion, setParentQuestion] =
    useState<AnyTypedQuizQuestion | null>(
      getQuestionByContentId(targetQuestion?.content.rule.parentId),
    );

  useLayoutEffect(() => {
    if (parentQuestion === null) return;
    if (parentQuestion.content.rule.main.length === 0) {
      let mutate = JSON.parse(JSON.stringify(parentQuestion));
      mutate.content.rule.main = [
        {
          next: targetQuestion.content.id,
          or: true,
          rules: [
            {
              question: parentQuestion.content.id,
              answers: [],
            },
          ],
        },
      ];
      setParentQuestion(mutate);
    }
  });

  if (targetQuestion === null || parentQuestion === null) {
    enqueueSnackbar("Невозможно найти данные ветвления для этого вопроса");
    return <></>;
  }

  const saveData = () => {
    if (parentQuestion !== null) {
      updateQuestion(
        parentQuestion.content.id,
        (question) => (question.content = parentQuestion.content),
      );
    }
    handleClose();
  };

  const handleClose = () => {
    updateOpenedModalSettingsId();
  };

  return (
    <>
      <Modal open={openedModalSettingsId !== null} onClose={handleClose}>
        <Box
          sx={{
            position: "absolute",
            overflow: "hidden",
            top: "50%",
            left: "50%",
            transform: "translate(-50%, -50%)",
            maxWidth: "620px",
            width: "100%",
            bgcolor: "background.paper",
            borderRadius: "12px",
            boxShadow: 24,
            p: 0,
          }}
        >
          <>
            <Box
              sx={{
                boxSizing: "border-box",
                background: "#F2F3F7",
                height: "70px",
                padding: "0 25px",
                display: "flex",
                alignItems: "center",
              }}
            >
              <Box sx={{ color: "#4d4d4d" }}>
                <Typography component="span">{targetQuestion.title}</Typography>
              </Box>
              {isMobile ? (
                <TooltipClickInfo
                  title={
                    "Настройте условия, при которых данный вопрос будет отображаться в quiz."
                  }
                />
              ) : (
                <Tooltip
                  title="Настройте условия, при которых данный вопрос будет отображаться в quiz."
                  placement="top"
                >
                  <Box>
                    <InfoIcon />
                  </Box>
                </Tooltip>
              )}
            </Box>

            <Box
              sx={{
                height: "400px",
                overflow: "auto",
              }}
            >
              {parentQuestion.content.rule.main.length ? (
                parentQuestion.content.rule.main.map((e: any, i: number) => {
                  if (e.next === targetQuestion.content.id) {
                    return (
                      <TypeSwitch
                        key={i}
                        setParentQuestion={setParentQuestion}
                        targetQuestion={targetQuestion}
                        parentQuestion={parentQuestion}
                        ruleIndex={i}
                      />
                    );
                  } else {
                    <></>;
                  }
                })
              ) : (
                <TypeSwitch
                  targetQuestion={targetQuestion}
                  setParentQuestion={setParentQuestion}
                  parentQuestion={parentQuestion}
                  ruleIndex={0}
                />
              )}
            </Box>

            <Box
              sx={{
                margin: "20px 0 0 20px",
                display: "flex",
                flexDirection: "column",
              }}
            >
              <Link
                variant="body2"
                sx={{
                  color: theme.palette.brightPurple.main,
                  marginBottom: "10px",
                  cursor: "pointer",
                }}
                onClick={() => {
                  const mutate = JSON.parse(JSON.stringify(parentQuestion));
                  mutate.content.rule.main.push(
                    createBranchingRuleMain(
                      targetQuestion.content.id,
                      parentQuestion.content.id,
                    ),
                  );
                  setParentQuestion(mutate);
                }}
              >
                Добавить условие
              </Link>

              <FormControlLabel
                control={
                  <Checkbox
                    sx={{
                      margin: 0,
                    }}
                    checked={
                      parentQuestion.content.rule.default ===
                      targetQuestion.content.id
                    }
                    onClick={() => {
                      let mutate = JSON.parse(JSON.stringify(parentQuestion));

                      if (parentQuestion.content.rule.children.length === 1) {
                        //Если потомок 1 - можно только чекнуть чекбокс (по-умолчанию и так должен быть чекнут единственный)
                        mutate.content.rule.default = targetQuestion.content.id;
                      } else {
                        //Изменять чекбокс можно только если много потомков
                        mutate.content.rule.default =
                          parentQuestion.content.rule.default ===
                          targetQuestion.content.id
                            ? ""
                            : targetQuestion.content.id;
                      }

                      setParentQuestion(mutate);
                    }}
                  />
                }
                label="Следующий вопрос по-умолчанию"
              />
            </Box>

            <Box
              sx={{
                display: "flex",
                justifyContent: "end",
                gap: "10px",
                margin: "20px",
              }}
            >
              <Button
                variant="outlined"
                onClick={handleClose}
                sx={{ width: "100%", maxWidth: "130px" }}
              >
                Отмена
              </Button>
              <Button
                variant="contained"
                sx={{ width: "100%", maxWidth: "130px" }}
                onClick={saveData}
              >
                Готово
              </Button>
            </Box>
          </>
        </Box>
      </Modal>
    </>
  );
}