frontPanel/src/pages/Questions/branchingQuestions.tsx

import {
  Box,
  Button,
  FormControl,
  FormControlLabel,
  IconButton,
  Link,
  Modal,
  Radio,
  RadioGroup,
  Typography,
  useTheme,
} from "@mui/material";
import { useState, useEffect } from "react";
import { questionStore, resetSomeField } from "@root/questions";
import { updateBranchState } from "@root/branches";
import { Select } from "./Select";
import DeleteIcon from "@icons/questionsPage/deleteIcon";
import RadioCheck from "@ui_kit/RadioCheck";
import RadioIcon from "@ui_kit/RadioIcon";
import InfoIcon from "@icons/Info";

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

export default function BranchingQuestions() {
  const [condition, setCondition] = useState<boolean>(false);
  const [conditionSelected, setConditionSelected] = useState<boolean>(false);
  const { openedModalSettings } = questionStore();
  const theme = useTheme();

  useEffect(() => {
    updateBranchState({ action: ACTIONS[0], condition: CONDITIONS[0] });
  }, []);

  const handleClose = () => {
    resetSomeField({ openedModalSettings: "" });
  };

  return (
    <>
      <Modal
        open={Boolean(openedModalSettings)}
        onClose={handleClose}
        aria-labelledby="modal-modal-title"
        aria-describedby="modal-modal-description"
      >
        <Box
          sx={{
            position: "absolute" as "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",
              padding: "25px",
              height: "70px",
              display: "flex",
            }}
          >
            <Typography sx={{ color: "#9A9AAF" }}>()</Typography>
            <InfoIcon width={24} height={24} />
          </Box>
          <Box
            sx={{
              padding: "20px",
              display: "flex",
              flexDirection: "column",
              gap: "30px",
            }}
          >
            <Box
              sx={{
                display: "flex",
                gap: "20px",
                alignItems: "center",
              }}
            >
              <Select
                items={ACTIONS}
                sx={{ maxWidth: "140px" }}
                onChange={(action) => updateBranchState({ action })}
              />
              <Typography sx={{ color: theme.palette.grey2.main }}>
                если в ответе на вопрос
              </Typography>
            </Box>
            {condition ? (
              <Box
                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" }}>
                    <DeleteIcon color={"#4D4D4D"} />
                  </IconButton>
                </Box>
                <Select
                  empty
                  items={STIPULATION}
                  onChange={(stipulation) => {
                    setConditionSelected(true);
                    updateBranchState({ stipulation });
                  }}
                  sx={{ marginBottom: "15px" }}
                />
                {conditionSelected && (
                  <>
                    <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
                      items={ANSWER}
                      onChange={(answer) => updateBranchState({ answer })}
                    />
                  </>
                )}
              </Box>
            ) : (
              ""
            )}
            <Box
              sx={{
                display: "flex",
                flexDirection: "column",
                alignItems: "baseline",
              }}
            >
              <Link
                variant="body2"
                sx={{
                  color: theme.palette.brightPurple.main,
                  marginBottom: "10px",
                }}
                onClick={() => setCondition(true)}
              >
                Добавить условие
              </Link>

              <FormControl>
                <RadioGroup
                  aria-labelledby="demo-controlled-radio-buttons-group"
                  defaultValue={0}
                  onChange={({ target }) =>
                    updateBranchState({
                      condition: CONDITIONS[Number(target.value)],
                    })
                  }
                >
                  {CONDITIONS.map((condition, index) => (
                    <FormControlLabel
                      key={condition + 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>
    </>
  );
}