frontPanel/src/pages/Questions/branchingQuestions.tsx

import { useState, useRef, useEffect } from "react";
import { useParams } from "react-router-dom";
import {
  Box,
  Button,
  Chip,
  FormControl,
  FormControlLabel,
  IconButton,
  Link,
  Modal,
  Radio,
  RadioGroup,
  Tooltip,
  Typography,
  useTheme,
} from "@mui/material";
import { questionStore, updateQuestionsList } from "@root/questions";
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 type { QuizQuestionBase } from "../../model/questionTypes/shared";

type BranchingQuestionsProps = {
  totalIndex: number;
};

const ACTIONS = ["Показать", "Скрыть"];
const STIPULATIONS = ["Условие 1", "Условие 2", "Условие 3"];
const ANSWERS = ["Ответ 1", "Ответ 2", "Ответ 3"];
const CONDITIONS = [
  "Все условия обязательны",
  "Обязательно хотя бы одно условие",
];

export default function BranchingQuestions({
  totalIndex,
}: BranchingQuestionsProps) {
  const theme = useTheme();
  const [title, setTitle] = useState<string>("");
  const [titleInputWidth, setTitleInputWidth] = useState<number>(0);
  const quizId = Number(useParams().quizId);
  const { listQuestions } = questionStore();
  const titleRef = useRef<HTMLDivElement>(null);
  const question = listQuestions[quizId][totalIndex] as QuizQuestionBase;

  useEffect(() => {
    setTitleInputWidth(titleRef.current?.offsetWidth || 0);
  }, [title]);

  const handleClose = () => {
    updateQuestionsList<QuizQuestionBase>(quizId, totalIndex, {
      openedModalSettings: false,
    });
  };

  return (
    <>
      <Modal open={question.openedModalSettings} 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: "#9A9AAF" }}>
              <Typography component="span">(</Typography>
              <Box sx={{ display: "inline" }}>
                <Typography
                  ref={titleRef}
                  sx={{
                    position: "absolute",
                    opacity: 0,
                    zIndex: "-100",
                    whiteSpace: "pre",
                  }}
                >
                  {title}
                </Typography>
                <input
                  type="text"
                  value={title}
                  placeholder="Заголовок вопроса"
                  onChange={({ target }) => setTitle(target.value)}
                  style={{
                    width: titleInputWidth ? titleInputWidth : 170,
                    outline: "none",
                    background: "transparent",
                    border: "none",
                    fontSize: "18px",
                    minWidth: "50px",
                    maxWidth: "500px",
                    fontFamily: "Rubik",
                    transition: ".2s",
                  }}
                />
              </Box>
              <Typography component="span">)</Typography>
            </Box>
            <Tooltip
              title="Настройте условия, при которых данный вопрос будет отображаться в квизе."
              placement="top"
            >
              <Box>
                <InfoIcon />
              </Box>
            </Tooltip>
          </Box>
          <Box
            sx={{
              padding: "20px",
              display: "flex",
              flexDirection: "column",
              gap: "30px",
            }}
          >
            <Box
              sx={{
                display: "flex",
                gap: "20px",
                alignItems: "center",
              }}
            >
              <Select
                items={ACTIONS}
                activeItemIndex={question.content.rule.show ? 0 : 1}
                sx={{ maxWidth: "140px" }}
                onChange={(action) => {
                  updateQuestionsList<QuizQuestionBase>(quizId, totalIndex, {
                    content: {
                      ...question.content,
                      rule: {
                        ...question.content.rule,
                        show: action === ACTIONS[0],
                      },
                    },
                  });
                }}
              />
              <Typography sx={{ color: theme.palette.grey2.main }}>
                если в ответе на вопрос
              </Typography>
            </Box>
            {question.content.rule.reqs.map((request, index) => (
              <Box
                key={index}
                sx={{
                  padding: "20px",
                  borderRadius: "8px",
                  height: "100%",
                  bgcolor: "#F2F3F7",
                }}
              >
                <Box
                  sx={{
                    display: "flex",
                    justifyContent: "space-between",
                    alignItems: "center",
                    pb: "5px",
                  }}
                >
                  <Typography sx={{ color: "#4D4D4D", fontWeight: "500" }}>
                    Условие 1
                  </Typography>
                  <IconButton
                    sx={{ borderRadius: "6px", padding: "2px" }}
                    onClick={() => {
                      const clonedContent = { ...question.content };
                      clonedContent.rule.reqs.splice(index, 1);
                      updateQuestionsList<QuizQuestionBase>(
                        quizId,
                        totalIndex,
                        {
                          content: clonedContent,
                        }
                      );
                    }}
                  >
                    <DeleteIcon color={"#4D4D4D"} />
                  </IconButton>
                </Box>
                <Select
                  empty
                  activeItemIndex={request.id ? Number(request.id) : -1}
                  items={STIPULATIONS}
                  onChange={(stipulation) => {
                    const clonedContent = { ...question.content };

                    clonedContent.rule.reqs[index] = {
                      id: String(
                        STIPULATIONS.findIndex((item) =>
                          item.includes(stipulation)
                        )
                      ),
                      vars: request.vars,
                    };

                    updateQuestionsList<QuizQuestionBase>(quizId, totalIndex, {
                      content: clonedContent,
                    });
                  }}
                  sx={{ marginBottom: "15px" }}
                />
                {request.id && (
                  <>
                    <Box
                      sx={{
                        display: "flex",
                        alignItems: "center",
                        pb: "10px",
                      }}
                    >
                      <Typography sx={{ color: "#4D4D4D", fontWeight: "500" }}>
                        Дан ответ
                      </Typography>
                      <Typography sx={{ color: "#7E2AEA", pl: "10px" }}>
                        (Укажите один или несколько вариантов)
                      </Typography>
                    </Box>
                    <Select
                      empty
                      activeItemIndex={-1}
                      items={ANSWERS}
                      onChange={(answer) => {
                        const clonedContent = { ...question.content };
                        const answerItemIndex = ANSWERS.findIndex(
                          (answerItem) => answerItem === answer
                        );

                        if (
                          !clonedContent.rule.reqs[index].vars.includes(
                            answerItemIndex
                          )
                        ) {
                          question.content.rule.reqs[index].vars.push(
                            answerItemIndex
                          );
                        }

                        updateQuestionsList<QuizQuestionBase>(
                          quizId,
                          totalIndex,
                          {
                            content: clonedContent,
                          }
                        );
                      }}
                      sx={{
                        marginBottom: "10px",
                        ".MuiSelect-select.MuiInputBase-input": {
                          color: "transparent",
                        },
                      }}
                    />
                    <Box
                      sx={{
                        display: "flex",
                        gap: "10px",
                      }}
                    >
                      {question.content.rule.reqs[index].vars.map(
                        (item, varIndex) => (
                          <Chip
                            key={varIndex}
                            label={ANSWERS[item]}
                            variant="outlined"
                            onDelete={() => {
                              const clonedContent = { ...question.content };
                              const removedItemIndex = clonedContent.rule.reqs[
                                index
                              ].vars.findIndex((varItem) => varItem === item);

                              clonedContent.rule.reqs[index].vars.splice(
                                removedItemIndex,
                                1
                              );

                              updateQuestionsList<QuizQuestionBase>(
                                quizId,
                                totalIndex,
                                {
                                  content: clonedContent,
                                }
                              );
                            }}
                          />
                        )
                      )}
                    </Box>
                  </>
                )}
              </Box>
            ))}
            <Box
              sx={{
                display: "flex",
                flexDirection: "column",
                alignItems: "baseline",
              }}
            >
              <Link
                variant="body2"
                sx={{
                  color: theme.palette.brightPurple.main,
                  marginBottom: "10px",
                }}
                onClick={() => {
                  const clonedContent = { ...question.content };
                  clonedContent.rule.reqs.push({ id: "", vars: [] });
                  updateQuestionsList<QuizQuestionBase>(quizId, totalIndex, {
                    content: clonedContent,
                  });
                }}
              >
                Добавить условие
              </Link>
              <FormControl>
                <RadioGroup
                  aria-labelledby="demo-controlled-radio-buttons-group"
                  value={question.content.rule.or ? 1 : 0}
                  onChange={(_, value) => {
                    updateQuestionsList<QuizQuestionBase>(quizId, totalIndex, {
                      content: {
                        ...question.content,
                        rule: {
                          ...question.content.rule,
                          or: Boolean(Number(value)),
                        },
                      },
                    });
                  }}
                >
                  {CONDITIONS.map((condition, index) => (
                    <FormControlLabel
                      key={index}
                      sx={{ color: theme.palette.grey2.main }}
                      value={index}
                      control={
                        <Radio
                          checkedIcon={<RadioCheck />}
                          icon={<RadioIcon />}
                        />
                      }
                      label={condition}
                    />
                  ))}
                </RadioGroup>
              </FormControl>
            </Box>
            <Box sx={{ display: "flex", justifyContent: "end", gap: "10px" }}>
              <Button
                variant="outlined"
                onClick={handleClose}
                sx={{ width: "100%", maxWidth: "130px" }}
              >
                Отмена
              </Button>
              <Button
                variant="contained"
                sx={{ width: "100%", maxWidth: "130px" }}
                onClick={handleClose}
              >
                Готово
              </Button>
            </Box>
          </Box>
        </Box>
      </Modal>
    </>
  );
}