frontPanel/src/pages/Questions/branchingQuestions.tsx

import {
  Box,
  Button,
  FormControl,
  FormControlLabel,
  IconButton,
  Link,
  Modal,
  Radio,
  RadioGroup,
  Typography,
  useTheme,
} from "@mui/material";
import * as React from "react";
import { useState } from "react";
import { questionStore, resetSomeField } from "@root/questions";
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";

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

  const [condition, setCondition] = useState<boolean>(false);
  const handleClose = () => {
    resetSomeField({ openedModalSettings: "" });
  };

  const handleChangeRadio = (event: React.ChangeEvent<HTMLInputElement>) => {
    setValue((event.target as HTMLInputElement).value);
  };
  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={["Показать", "Скрыть"]}
                sx={{ maxWidth: "140px" }}
              />
              <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={["Условие 1", "Условие 2", "Условие 3"]}
                  onChange={() => setConditionSelected(true)}
                  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={["Условие 1", "Условие 2", "Условие 3"]}
                    />
                  </>
                )}
              </Box>
            ) : (
              ""
            )}
            <Box
              sx={{
                display: "flex",
                flexDirection: "column",
                alignItems: "baseline",
              }}
            >
              <Link
                component="button"
                variant="body2"
                sx={{
                  color: theme.palette.brightPurple.main,
                  marginBottom: "10px",
                }}
                onClick={() => setCondition(true)}
              >
                Добавить условие
              </Link>

              <FormControl>
                <RadioGroup
                  aria-labelledby="demo-controlled-radio-buttons-group"
                  name="controlled-radio-buttons-group"
                  value={value}
                  onChange={handleChangeRadio}
                >
                  <FormControlLabel
                    sx={{ color: theme.palette.grey2.main }}
                    value="1"
                    control={
                      <Radio
                        checkedIcon={<RadioCheck />}
                        icon={<RadioIcon />}
                      />
                    }
                    label="Все условия обязательны"
                  />
                  <FormControlLabel
                    sx={{ color: theme.palette.grey2.main }}
                    value="2"
                    control={
                      <Radio
                        checkedIcon={<RadioCheck />}
                        icon={<RadioIcon />}
                      />
                    }
                    label="Обязательно хотя бы одно условие"
                  />
                </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",
                }}
              >
                Готово
              </Button>
            </Box>
          </Box>
        </Box>
      </Modal>
    </>
  );
}