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}}
                                        // onClick={() => {
                                        // }}
                                    >
                                        Добавить условие
                                    </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>
        </>
    );
}