frontPanel/src/pages/Questions/Branching/BranchingModal/Settings.tsx

import CalendarIcon from "@icons/CalendarIcon";
import { DeleteIcon } from "@icons/questionsPage/deleteIcon";
import {
  Box,
  Checkbox,
  FormControl,
  FormControlLabel,
  IconButton,
  MenuItem,
  Radio,
  RadioGroup,
  Select,
  TextField,
  Typography,
  useMediaQuery,
  useTheme,
} from "@mui/material";
import { SelectChangeEvent } from "@mui/material/Select";
import { DatePicker } from "@mui/x-date-pickers";
import { TimePicker } from "@mui/x-date-pickers/TimePicker";
import RadioCheck from "@ui_kit/RadioCheck";
import RadioIcon from "@ui_kit/RadioIcon";
import moment from "moment";
import { useEffect, useState } from "react";
import { useParams } from "react-router-dom";
import type { AnyTypedQuizQuestion, QuizQuestionNumber } from "@frontend/squzanswerer";

const CONDITIONS = ["Все условия обязательны", "Обязательно хотя бы одно условие"];
interface Props {
  parentQuestion: AnyTypedQuizQuestion;
  targetQuestion: AnyTypedQuizQuestion;
  ruleIndex: number;
  setParentQuestion: (q: AnyTypedQuizQuestion) => void;
}

// Этот компонент вызывается 1 раз на каждое условие родителя для перехода к этому вопросу. Поэтому для изменения стора мы знаем индекс
export const TypeSwitch = ({ parentQuestion, targetQuestion, ruleIndex, setParentQuestion }: Props) => {
  switch (parentQuestion.type) {
    case "variant":
    case "images":
    case "varimg":
    case "emoji":
    case "select":
      return parentQuestion.content.variants === undefined ? (
        <BlockRule text={"У родителя нет вариантов"} />
      ) : (
        <SelectorType
          targetQuestion={targetQuestion}
          parentQuestion={parentQuestion}
          ruleIndex={ruleIndex}
          setParentQuestion={setParentQuestion}
        />
      );
      break;

    case "date":
      return (
        <DateInputsType
          targetQuestion={targetQuestion}
          parentQuestion={parentQuestion}
          ruleIndex={ruleIndex}
          setParentQuestion={setParentQuestion}
        />
      );

      break;

    case "number":
      return (
        <NumberInputsType
          targetQuestion={targetQuestion}
          parentQuestion={parentQuestion}
          ruleIndex={ruleIndex}
          setParentQuestion={setParentQuestion}
        />
      );
      break;

    case "page":
      return <BlockRule text={"У такого родителя может быть только один потомок"} />;
      break;

    case "text":
      return (
        <TextInputsType
          targetQuestion={targetQuestion}
          parentQuestion={parentQuestion}
          ruleIndex={ruleIndex}
          setParentQuestion={setParentQuestion}
        />
      );
      break;

    case "file":
      return (
        <FileInputsType
          targetQuestion={targetQuestion}
          parentQuestion={parentQuestion}
          ruleIndex={ruleIndex}
          setParentQuestion={setParentQuestion}
        />
      );
      break;

    case "rating":
      return (
        <RatingInputsType
          targetQuestion={targetQuestion}
          parentQuestion={parentQuestion}
          ruleIndex={ruleIndex}
          setParentQuestion={setParentQuestion}
        />
      );
      break;

    default:
      return <BlockRule text={"Не распознан тип родительского вопроса"} />;
      break;
  }
};

export const BlockRule = ({ text }: { text: string }) => {
  return (
    <Typography
      sx={{
        margin: "100px 0",
        textAlign: "center",
      }}
    >
      {text}
    </Typography>
  );
};
const SelectorType = ({ parentQuestion, targetQuestion, ruleIndex, setParentQuestion }: Props) => {
  const theme = useTheme();
  const quizId = Number(useParams().quizId);
  return (
    <Box
      sx={{
        padding: "20px",
        margin: "20px",
        borderRadius: "8px",
        bgcolor: "#F2F3F7",
        height: "280px",
        overflow: "auto",
      }}
    >
      <Box
        sx={{
          display: "flex",
          justifyContent: "space-between",
          alignItems: "center",
          pb: "5px",
        }}
      >
        <Typography sx={{ color: "#4D4D4D", fontWeight: "500" }}>Новое условие</Typography>
        <IconButton
          sx={{ borderRadius: "6px", padding: "2px" }}
          onClick={() => {
            let newParentQuestion = JSON.parse(JSON.stringify(parentQuestion));
            newParentQuestion.content.rule.main.splice(ruleIndex, 1);
            setParentQuestion(newParentQuestion);
          }}
        >
          <DeleteIcon color={"#4D4D4D"} />
        </IconButton>
      </Box>

      <Box
        sx={{
          display: "flex",
          alignItems: "center",
          pb: "10px",
        }}
      >
        <Typography sx={{ color: "#4D4D4D", fontWeight: "500" }}>Дан ответ</Typography>
        <Typography sx={{ color: "#7E2AEA", pl: "10px" }}>(Укажите один или несколько вариантов)</Typography>
      </Box>
      <Select
        multiple
        value={parentQuestion.content?.rule?.main[ruleIndex]?.rules[0]?.answers || []}
        onChange={(event: SelectChangeEvent) => {
          let newParentQuestion = JSON.parse(JSON.stringify(parentQuestion));
          newParentQuestion.content.rule.main[ruleIndex].rules[0].answers = (event.target as HTMLSelectElement).value;
          setParentQuestion(newParentQuestion);
        }}
        sx={{
          width: "100%",
          height: "48px",
          borderRadius: "8px",
          "& .MuiOutlinedInput-notchedOutline": {
            border: `1px solid ${theme.palette.brightPurple.main} !important`,
            height: "48px",
            borderRadius: "10px",
          },
        }}
      >
        {parentQuestion.content.variants.map((e: any) => {
          return <MenuItem value={e.id}>{e.answer}</MenuItem>;
        })}
      </Select>

      <FormControl>
        <RadioGroup
          aria-labelledby="demo-controlled-radio-buttons-group"
          value={parentQuestion.content.rule.main[ruleIndex].or}
          onChange={(_, value) => {
            let newParentQuestion = JSON.parse(JSON.stringify(parentQuestion));
            newParentQuestion.content.rule.main[ruleIndex].or = value;
            setParentQuestion(newParentQuestion);
          }}
        >
          {CONDITIONS.map((condition, totalIndex) => (
            <FormControlLabel
              key={totalIndex}
              sx={{ color: theme.palette.grey2.main }}
              value={Boolean(Number(totalIndex))}
              control={
                <Radio
                  checkedIcon={<RadioCheck />}
                  icon={<RadioIcon />}
                />
              }
              label={condition}
            />
          ))}
        </RadioGroup>
      </FormControl>
    </Box>
  );
};
const DateInputsType = ({ parentQuestion, targetQuestion, ruleIndex, setParentQuestion }: Props) => {
  const theme = useTheme();
  const upLg = useMediaQuery(theme.breakpoints.up("md"));

  const time = moment(new Date());

  const [firstDate, setFirstDate] = useState(time);
  const [secondDate, setSecondDate] = useState(time);
  const [firstTime, setFirstTime] = useState(time);
  const [secondTime, setSecondTime] = useState(time);

  useEffect(() => {
    let newParentQuestion = JSON.parse(JSON.stringify(parentQuestion));

    newParentQuestion.content.rule.main[ruleIndex].rules[0].answers[0] = time;
    if (newParentQuestion.content.dateRange) parentQuestion.content.rule.main[ruleIndex].rules[0].answers[1] = time;

    setParentQuestion(newParentQuestion);
  }, [firstDate, secondDate, firstTime, secondTime]);

  return (
    <Box
      sx={{
        padding: "20px",
        margin: "20px",
        borderRadius: "8px",
        bgcolor: "#F2F3F7",
        height: "280px",
        overflow: "auto",
      }}
    >
      <Box
        sx={{
          display: "flex",
          justifyContent: "space-between",
          alignItems: "center",
          pb: "5px",
        }}
      >
        <Typography sx={{ color: "#4D4D4D", fontWeight: "500" }}>Новое условие</Typography>
        <IconButton
          sx={{ borderRadius: "6px", padding: "2px" }}
          onClick={() => {
            let newParentQuestion = JSON.parse(JSON.stringify(parentQuestion));
            newParentQuestion.content.rule.main.splice(ruleIndex, 1);
            setParentQuestion(newParentQuestion);
          }}
        >
          <DeleteIcon color={"#4D4D4D"} />
        </IconButton>
      </Box>

      <Box
        sx={{
          display: "flex",
          alignItems: "center",
          pb: "10px",
        }}
      >
        <Typography sx={{ color: "#4D4D4D", fontWeight: "500" }}>Дан ответ</Typography>
        <Typography sx={{ color: "#7E2AEA", pl: "10px" }}>(Укажите один или несколько вариантов)</Typography>
      </Box>

      <Box
        sx={{
          backgroundColor: "#E8EAEE",
          margin: "10px",
        }}
      >
        {parentQuestion.content.dateRange && (
          <Typography sx={{ color: "#4D4D4D", p: "10px" }}>(Начало периода)</Typography>
        )}
        <DatePicker
          defaultValue={moment(
            new Date(parentQuestion.content.rule.main[ruleIndex].rules[0].answers[0]).toLocaleDateString()
          )}
          onChange={(dateString) => {
            const date = dateString?.toDate().toLocaleDateString("ru-RU", {
              year: "numeric",
              month: "2-digit",
              day: "2-digit",
            });
            let newParentQuestion = JSON.parse(JSON.stringify(parentQuestion));
            newParentQuestion.content.rule.main[ruleIndex].rules[0].answers = [date];
            setParentQuestion(newParentQuestion);
          }}
          slots={{
            openPickerIcon: () => <CalendarIcon />,
          }}
          slotProps={{
            openPickerButton: {
              sx: {
                p: 0,
              },
              "data-cy": "open-datepicker",
            },
          }}
          sx={{
            p: "10px",
            "& .MuiInputBase-root": {
              minWidth: "325px",
              backgroundColor: "#F2F3F7",
              borderRadius: "10px",
              pr: "31px",
              "& input": {
                py: "11px",
                pl: upLg ? "20px" : "13px",
                lineHeight: "19px",
              },
              "& fieldset": {
                borderColor: "#9A9AAF",
              },
            },
          }}
        />
        {parentQuestion.content.time && (
          <TimePicker
            value={parentQuestion.content.rule.main[ruleIndex].rules[0].answers[0]}
            sx={{
              p: "10px",
              "& .MuiInputBase-root": {
                minWidth: "325px",
                backgroundColor: "#F2F3F7",
                borderRadius: "10px",
                pr: "22px",
                "& input": {
                  py: "11px",
                  pl: upLg ? "20px" : "13px",
                  lineHeight: "19px",
                },
                "& fieldset": {
                  borderColor: "#9A9AAF",
                },
              },
            }}
          />
        )}
      </Box>

      {parentQuestion.content.dateRange && (
        <Box
          sx={{
            backgroundColor: "#E8EAEE",
            margin: "10px",
          }}
        >
          {parentQuestion.content.dateRange && (
            <Typography sx={{ color: "#4D4D4D", p: "10px" }}>(Конец периода)</Typography>
          )}
          <DatePicker
            value={parentQuestion.content.rule.main[ruleIndex].rules[0].answers[1]}
            onChange={() => {}}
            slots={{
              openPickerIcon: () => <CalendarIcon />,
            }}
            slotProps={{
              openPickerButton: {
                sx: {
                  p: 0,
                },
                "data-cy": "open-datepicker",
              },
            }}
            sx={{
              p: "10px",
              "& .MuiInputBase-root": {
                minWidth: "325px",
                backgroundColor: "#F2F3F7",
                borderRadius: "10px",
                pr: "31px",
                "& input": {
                  py: "11px",
                  pl: upLg ? "20px" : "13px",
                  lineHeight: "19px",
                },
                "& fieldset": {
                  borderColor: "#9A9AAF",
                },
              },
            }}
          />
          {parentQuestion.content.time && (
            <TimePicker
              value={parentQuestion.content.rule.main[ruleIndex].rules[0].answers[1]}
              sx={{
                p: "10px",
                "& .MuiInputBase-root": {
                  minWidth: "325px",
                  backgroundColor: "#F2F3F7",
                  borderRadius: "10px",
                  pr: "22px",
                  "& input": {
                    py: "11px",
                    pl: upLg ? "20px" : "13px",
                    lineHeight: "19px",
                  },
                  "& fieldset": {
                    borderColor: "#9A9AAF",
                  },
                },
              }}
            />
          )}
        </Box>
      )}
    </Box>
  );
};
const NumberInputsType = ({ parentQuestion, targetQuestion, ruleIndex, setParentQuestion }: Props) => {
  const theme = useTheme();
  const quizId = Number(useParams().quizId);

  return (
    <Box
      sx={{
        padding: "20px",
        margin: "20px",
        borderRadius: "8px",
        bgcolor: "#F2F3F7",
        height: "280px",
        overflow: "auto",
      }}
    >
      <Box
        sx={{
          display: "flex",
          justifyContent: "space-between",
          alignItems: "center",
          pb: "5px",
        }}
      >
        <Typography sx={{ color: "#4D4D4D", fontWeight: "500" }}>Новое условие</Typography>
        <IconButton
          sx={{ borderRadius: "6px", padding: "2px" }}
          onClick={() => {
            let newParentQuestion = JSON.parse(JSON.stringify(parentQuestion));
            newParentQuestion.content.rule.main.splice(ruleIndex, 1);
            setParentQuestion(newParentQuestion);
          }}
        >
          <DeleteIcon color={"#4D4D4D"} />
        </IconButton>
      </Box>

      <Box
        sx={{
          display: "flex",
          alignItems: "center",
          pb: "10px",
        }}
      >
        <Typography sx={{ color: "#4D4D4D", fontWeight: "500" }}>Дан ответ</Typography>
        <Typography sx={{ color: "#7E2AEA", pl: "10px" }}>(Укажите один или несколько вариантов)</Typography>
      </Box>
      <Box>
        <TextField
          sx={{ marginTop: "20px", width: "100%" }}
          placeholder="от"
          value={parentQuestion.content.rule.main[ruleIndex].rules[0].answers[0]?.split("—")[0]}
          onChange={({ target }: React.ChangeEvent<HTMLInputElement>) => {
            const newParentQuestion = JSON.parse(JSON.stringify(parentQuestion));
            const previousValue = newParentQuestion.content.rule.main[ruleIndex].rules[0].answers[0];
            newParentQuestion.content.rule.main[ruleIndex].rules[0].answers[0] = (parentQuestion as QuizQuestionNumber)
              .content.chooseRange
              ? previousValue
                ? `${target.value}—${previousValue.split("—")[1] || 0}`
                : `${target.value}—0`
              : target.value;
            setParentQuestion(newParentQuestion);
          }}
        />
        {(parentQuestion as QuizQuestionNumber).content.chooseRange && (
          <TextField
            placeholder="до"
            sx={{ marginTop: "20px", width: "100%" }}
            value={parentQuestion.content.rule.main[ruleIndex].rules[0].answers[0]?.split("—")[1]}
            onChange={({ target }: React.ChangeEvent<HTMLInputElement>) => {
              const newParentQuestion = JSON.parse(JSON.stringify(parentQuestion));
              const previousValue = newParentQuestion.content.rule.main[ruleIndex].rules[0].answers[0];
              newParentQuestion.content.rule.main[ruleIndex].rules[0].answers[0] = previousValue
                ? `${previousValue.split("—")[0] || 0}—${target.value}`
                : `0—${target.value}`;
              setParentQuestion(newParentQuestion);
            }}
          />
        )}
      </Box>
    </Box>
  );
};
const TextInputsType = ({ parentQuestion, targetQuestion, ruleIndex, setParentQuestion }: Props) => {
  const theme = useTheme();
  const quizId = Number(useParams().quizId);

  return (
    <Box
      sx={{
        padding: "20px",
        margin: "20px",
        borderRadius: "8px",
        bgcolor: "#F2F3F7",
        height: "280px",
        overflow: "auto",
      }}
    >
      <Box
        sx={{
          display: "flex",
          justifyContent: "space-between",
          alignItems: "center",
          pb: "5px",
        }}
      >
        <Typography sx={{ color: "#4D4D4D", fontWeight: "500" }}>Новое условие</Typography>
        <IconButton
          sx={{ borderRadius: "6px", padding: "2px" }}
          onClick={() => {
            let newParentQuestion = JSON.parse(JSON.stringify(parentQuestion));
            newParentQuestion.content.rule.main.splice(ruleIndex, 1);
            setParentQuestion(newParentQuestion);
          }}
        >
          <DeleteIcon color={"#4D4D4D"} />
        </IconButton>
      </Box>

      <Box
        sx={{
          display: "inline",
          alignItems: "center",
          pb: "10px",
        }}
      >
        <Typography sx={{ color: "#4D4D4D", fontWeight: "500" }}>Дан ответ</Typography>
        <Typography sx={{ color: "#7E2AEA", pl: "10px", fontSize: "12px" }}>
          (Укажите текст, при совпадении с которым пользователь попадёт на этот вопрос)
        </Typography>
      </Box>
      <TextField
        sx={{
          marginTop: "20px",
          width: "100%",
        }}
        value={parentQuestion.content.rule.main[ruleIndex].rules[0].answers[0]}
        onChange={(event: React.FormEvent<HTMLInputElement>) => {
          let newParentQuestion = JSON.parse(JSON.stringify(parentQuestion));
          newParentQuestion.content.rule.main[ruleIndex].rules[0].answers = [(event.target as HTMLInputElement).value];
          setParentQuestion(newParentQuestion);
        }}
      />
    </Box>
  );
};
const FileInputsType = ({ parentQuestion, targetQuestion, ruleIndex, setParentQuestion }: Props) => {
  const theme = useTheme();
  const quizId = Number(useParams().quizId);

  return (
    <Box
      sx={{
        padding: "20px",
        margin: "20px",
        borderRadius: "8px",
        bgcolor: "#F2F3F7",
        height: "280px",
        overflow: "auto",
      }}
    >
      <Box
        sx={{
          display: "flex",
          justifyContent: "space-between",
          alignItems: "center",
          pb: "5px",
        }}
      >
        <Typography sx={{ color: "#4D4D4D", fontWeight: "500" }}>Новое условие</Typography>
        <IconButton
          sx={{ borderRadius: "6px", padding: "2px" }}
          onClick={() => {
            let newParentQuestion = JSON.parse(JSON.stringify(parentQuestion));
            newParentQuestion.content.rule.main.splice(ruleIndex, 1);
            setParentQuestion(newParentQuestion);
          }}
        >
          <DeleteIcon color={"#4D4D4D"} />
        </IconButton>
      </Box>

      <Box
        sx={{
          display: "inline",
          alignItems: "center",
          pb: "10px",
        }}
      >
        <Typography sx={{ color: "#4D4D4D", fontWeight: "500" }}>
          Перевести на этот вопрос если пользователь загрузил файл
        </Typography>
      </Box>
      <FormControlLabel
        control={
          <Checkbox
            sx={{
              margin: 0,
            }}
            checked={parentQuestion.content.rule.main[ruleIndex].rules[0].answers[0]}
            onChange={(event: React.FormEvent<HTMLInputElement>) => {
              let newParentQuestion = JSON.parse(JSON.stringify(parentQuestion));
              newParentQuestion.content.rule.main[ruleIndex].rules[0].answers = [
                (event.target as HTMLInputElement).checked,
              ];
              setParentQuestion(newParentQuestion);
            }}
          />
        }
        label="да"
      />
    </Box>
  );
};
const RatingInputsType = ({ parentQuestion, targetQuestion, ruleIndex, setParentQuestion }: Props) => {
  const theme = useTheme();
  const quizId = Number(useParams().quizId);

  return (
    <Box
      sx={{
        padding: "20px",
        margin: "20px",
        borderRadius: "8px",
        bgcolor: "#F2F3F7",
        height: "280px",
        overflow: "auto",
      }}
    >
      <Box
        sx={{
          display: "flex",
          justifyContent: "space-between",
          alignItems: "center",
          pb: "5px",
        }}
      >
        <Typography sx={{ color: "#4D4D4D", fontWeight: "500" }}>Новое условие</Typography>
        <IconButton
          sx={{ borderRadius: "6px", padding: "2px" }}
          onClick={() => {
            let newParentQuestion = JSON.parse(JSON.stringify(parentQuestion));
            newParentQuestion.content.rule.main.splice(ruleIndex, 1);
            setParentQuestion(newParentQuestion);
          }}
        >
          <DeleteIcon color={"#4D4D4D"} />
        </IconButton>
      </Box>

      <Box
        sx={{
          display: "inline",
          alignItems: "center",
          pb: "10px",
        }}
      >
        <Typography sx={{ color: "#7E2AEA", pl: "10px", fontSize: "12px" }}>
          Ожидаемое количество ячеек(не более доступного количества)
        </Typography>
      </Box>
      <TextField
        sx={{
          marginTop: "20px",
          width: "100%",
        }}
        value={parentQuestion.content.rule.main[ruleIndex].rules[0].answers[0]}
        onChange={(event: React.FormEvent<HTMLInputElement>) => {
          let newParentQuestion = JSON.parse(JSON.stringify(parentQuestion));
          let valueNumber = Number((event.target as HTMLInputElement).value.replace(/[^0-9,\s]/g, ""));
          valueNumber = valueNumber > parentQuestion.content.steps ? parentQuestion.content.steps : valueNumber;
          newParentQuestion.content.rule.main[ruleIndex].rules[0].answers = [valueNumber];
          setParentQuestion(newParentQuestion);
        }}
      />
    </Box>
  );
};