frontPanel/src/pages/ContactFormPage/BranchingForm.tsx

import {
  Box,
  Button,
  FormControl,
  FormControlLabel,
  Link,
  Modal,
  Radio,
  RadioGroup,
  SelectChangeEvent,
  Typography,
  useTheme,
} from "@mui/material";
import * as React from "react";
import SelectableButton from "@ui_kit/SelectableButton";
import { useState } from "react";
import RadioCheck from "@ui_kit/RadioCheck";
import RadioIcon from "@ui_kit/RadioIcon";

type LogicForm = "conditions" | "results";

export default function BranchingForm() {
  const theme = useTheme();
  const [open, setOpen] = React.useState(false);
  const handleOpen = () => setOpen(true);
  const handleClose = () => setOpen(false);
  const [logicForm, setLogicForm] = useState<LogicForm>("conditions");
  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={{
              display: "flex",
              padding: "20px",
              borderRadius: "12px 12px 0 0",
              background: theme.palette.background.default,
            }}
          >
            <Typography>Условия показа формы</Typography>
          </Box>
          <Box
            sx={{
              padding: "20px",
              display: "flex",
              flexDirection: "column",
              gap: "30px",
            }}
          >
            <Box
              sx={{
                display: "flex",
                gap: "20px",
                alignItems: "center",
              }}
            >
              <Typography sx={{ color: theme.palette.grey2.main }}>
                Логика показа форм
              </Typography>
            </Box>
            <Box
              sx={{
                display: "flex",
                gap: "10px",
              }}
            >
              <SelectableButton
                isSelected={logicForm === "conditions"}
                onClick={() => setLogicForm("conditions")}
              >
                От условий
              </SelectableButton>
              <SelectableButton
                isSelected={logicForm === "results"}
                onClick={() => setLogicForm("results")}
              >
                С результатами
              </SelectableButton>
            </Box>
            <Box
              sx={{
                display: "flex",
                flexDirection: "column",
                alignItems: "baseline",
              }}
            >
              {logicForm === "conditions" ? (
                <>
                  <Link
                    component="button"
                    variant="body2"
                    sx={{ color: theme.palette.brightPurple.main }}
                  >
                    Добавить условие
                  </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>
                </>
              ) : (
                <>
                  <Typography>У вас пока что нет результатов.</Typography>
                  <Button>Добавить</Button>
                </>
              )}
            </Box>
            <Box sx={{ display: "flex", justifyContent: "end", gap: "10px" }}>
              <Button variant="outlined" onClick={handleClose}>
                Отмена
              </Button>
              <Button variant="contained">Готово</Button>
            </Box>
          </Box>
        </Box>
      </Modal>
    </>
  );
}