import {Box, FormControl, FormControlLabel, Radio, RadioGroup, Typography, useTheme} from "@mui/material";
import CustomCheckbox from "@ui_kit/CustomCheckbox";
import InfoIcon from "../../../assets/icons/InfoIcon";
import * as React from "react";


export default function SettingEmoji() {
    const [value, setValue] = React.useState('1');
    const handleChangeRadio = (event: React.ChangeEvent<HTMLInputElement>) => {
        setValue((event.target as HTMLInputElement).value);
    };
    const theme = useTheme()
    return (
        <Box sx={{display: 'flex'}}>
            <Box sx={{padding: '20px'}}>
                <Typography>Настройки ответов</Typography>
                <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="Многострочное" />
                        <FormControlLabel sx={{color: theme.palette.grey2.main}} value="3" control={<Radio />} label="Только числа" />
                    </RadioGroup>
                </FormControl>
            </Box>
            <Box sx={{padding: '20px'}}>
                <Typography>Настройки вопросов</Typography>
                <CustomCheckbox label={'Автозаполнение адреса'}/>
                <CustomCheckbox label={'Необязательный вопрос'}/>
                <CustomCheckbox label={'Внутреннее название вопроса'}/> <InfoIcon />
            </Box>
        </Box>
    );
};