frontPanel/src/pages/Questions/branchingQuestions.tsx

import {
  Box,
  Button,
  FormControl,
  FormControlLabel,
  IconButton,
  Link,
  MenuItem,
  Modal,
  Radio,
  RadioGroup,
  Select,
  SelectChangeEvent,
  TextField,
  Typography,
  useTheme,
} from "@mui/material";
import * as React from "react";
import ArrowDown from "@icons/ArrowDownIcon";
import { useState } from "react";
import DeleteIcon from "@icons/questionsPage/deleteIcon";
import RadioCheck from "@ui_kit/RadioCheck";
import RadioIcon from "@ui_kit/RadioIcon";

export default function BranchingQuestions() {
  const theme = useTheme();
  const [open, setOpen] = useState(false);
  const [condition, setCondition] = useState<boolean>(false);
  const handleOpen = () => setOpen(true);
  const handleClose = () => setOpen(false);

  const [display, setDisplay] = React.useState("1");
  const handleChange = (event: SelectChangeEvent) => {
    setDisplay(event.target.value);
  };

  const [value, setValue] = React.useState("1");

  const handleChangeRadio = (event: React.ChangeEvent<HTMLInputElement>) => {
    setValue((event.target as HTMLInputElement).value);
  };
  return (
    <>
      <Button onClick={handleOpen}>открыть</Button>
      <Modal
        open={open}
        onClose={handleClose}
        aria-labelledby="modal-modal-title"
        aria-describedby="modal-modal-description"
      >
        <Box
          sx={{
            position: "absolute" as "absolute",
            top: "50%",
            left: "50%",
            transform: "translate(-50%, -50%)",
            maxWidth: "620px",
            width: "100%",
            bgcolor: "background.paper",
            borderRadius: "12px",
            boxShadow: 24,
            p: 0,
          }}
        >
          <Box
            sx={{
              padding: "20px",
              display: "flex",
              flexDirection: "column",
              gap: "30px",
            }}
          >
            <Box
              sx={{
                display: "flex",
                gap: "20px",
                alignItems: "center",
              }}
            >
              <FormControl
                fullWidth
                size="small"
                sx={{
                  width: "100%",
                  maxWidth: "140px",
                  height: "48px",
                }}
              >
                <Select
                  id="display-select"
                  variant="outlined"
                  value={display}
                  displayEmpty
                  onChange={handleChange}
                  sx={{
                    height: "48px",
                    borderRadius: "8px",
                    "& .MuiOutlinedInput-notchedOutline": {
                      border: `1px solid ${theme.palette.brightPurple.main} !important`,
                    },
                  }}
                  MenuProps={{
                    PaperProps: {
                      sx: {
                        mt: "8px",
                        p: "4px",
                        borderRadius: "8px",
                        border: "1px solid #EEE4FC",
                        boxShadow: "0px 8px 24px rgba(210, 208, 225, 0.4)",
                      },
                    },
                    MenuListProps: {
                      sx: {
                        py: 0,
                        display: "flex",
                        flexDirection: "column",
                        gap: "8px",
                        "& .Mui-selected": {
                          backgroundColor: theme.palette.background.default,
                          color: theme.palette.brightPurple.main,
                        },
                      },
                    },
                  }}
                  inputProps={{
                    sx: {
                      color: theme.palette.brightPurple.main,
                      display: "flex",
                      alignItems: "center",
                      px: "9px",
                      gap: "20px",
                    },
                  }}
                  IconComponent={(props) => <ArrowDown {...props} />}
                >
                  <MenuItem
                    value={1}
                    sx={{
                      display: "flex",
                      alignItems: "center",
                      gap: "20px",
                      p: "4px",
                      borderRadius: "5px",
                      color: theme.palette.grey2.main,
                    }}
                  >
                    Показать
                  </MenuItem>
                  <MenuItem
                    value={2}
                    sx={{
                      display: "flex",
                      alignItems: "center",
                      gap: "20px",
                      p: "4px",
                      borderRadius: "5px",
                      color: theme.palette.grey2.main,
                    }}
                  >
                    Скрыть
                  </MenuItem>
                </Select>
              </FormControl>
              <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: "14px" }}>
                  <Typography>Условие 1</Typography>
                  <IconButton sx={{ borderRadius: "6px", padding: "2px" }}>
                    <DeleteIcon />
                  </IconButton>
                </Box>

                <TextField
                  // value={text}
                  fullWidth
                  sx={{
                    pb: "20px",
                    "& .MuiInputBase-root": {
                      backgroundColor: "#F2F3F7",
                      height: "48px",
                      borderRadius: "10px",
                    },
                  }}
                  inputProps={{
                    sx: {
                      borderRadius: "10px",
                      fontSize: "18px",
                      lineHeight: "21px",
                      py: 0,
                    },
                  }}
                />
                <Box sx={{ display: "flex", alignItems: "center", pb: "14px" }}>
                  <Typography>Дан ответ</Typography>
                  <Typography sx={{ color: "#7E2AEA", pl: "10px" }}>(Укажите один или несколько вариантов)</Typography>
                </Box>
                <TextField
                  // value={text}
                  fullWidth
                  sx={{
                    "& .MuiInputBase-root": {
                      backgroundColor: "#F2F3F7",
                      height: "48px",
                      borderRadius: "10px",
                    },
                  }}
                  inputProps={{
                    sx: {
                      borderRadius: "10px",
                      fontSize: "18px",
                      lineHeight: "21px",
                      py: 0,
                    },
                  }}
                />
              </Box>
            ) : (
              ""
            )}
            <Box
              sx={{
                display: "flex",
                flexDirection: "column",
                alignItems: "baseline",
              }}
            >
              <Link
                component="button"
                variant="body2"
                sx={{ color: theme.palette.brightPurple.main }}
                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}
              >
                Отмена
              </Button>
              <Button
                variant="contained">
                Готово
              </Button>
            </Box>
          </Box>
        </Box>
      </Modal>
    </>
  );
}