frontPanel/src/pages/Questions/branchingQuestions.tsx

import {
    Box,
    Button,
    FormControl, FormControlLabel, Link,
    MenuItem,
    Modal, Radio, RadioGroup,
    Select,
    SelectChangeEvent,
    Typography,
    useTheme
} from "@mui/material";
import * as React from "react";
import InfoIcon from "@icons/InfoIcon";
import ArrowDown from "@icons/ArrowDownIcon";
import CustomButton from "../../components/CustomButton";


export default function BranchingQuestions() {
    const theme = useTheme()
    const [open, setOpen] = React.useState(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={{display: 'flex',
                            padding: '20px',
                            borderRadius: '12px 12px 0 0',
                            background: theme.palette.background.default,
                        }}
                    >
                        <Typography>0</Typography>
                        <InfoIcon/>
                    </Box>
                    <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>
                        <Box sx={{
                            display: 'flex',
                            flexDirection: 'column',
                            alignItems: 'baseline',
                        }}>
                            <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 />} label="Все условия обязательны" />
                                    <FormControlLabel sx={{color: theme.palette.grey2.main}} value="2" control={<Radio />} label="Обязательно хотя бы одно условие" />
                                </RadioGroup>
                            </FormControl>

                        </Box>
                        <Box sx={{display: 'flex', justifyContent: 'end', gap: '10px'}}>
                            <CustomButton
                                variant="outlined"
                                onClick={handleClose}
                                sx={{
                                    border: `1px solid ${theme.palette.brightPurple.main}`,
                                    color: theme.palette.brightPurple.main,
                                    width: "auto",
                                    ml: "auto",
                                    px: "20px",
                                    py: "9px",
                                }}
                            >Отмена</CustomButton>
                            <CustomButton
                                variant="contained"
                                sx={{
                                    backgroundColor: theme.palette.brightPurple.main,
                                    color: "white",
                                    width: "auto",
                                    px: "20px",
                                    py: "9px",
                                }}
                            >Готово</CustomButton>
                        </Box>
                    </Box>
                </Box>
            </Modal>
        </>
    );
}