import {Box, Link, Typography, useTheme} from "@mui/material";
import SelectableButton from "../../components/CreateQuiz/SelectableButton";
import CustomTextField from "@ui_kit/CustomTextField";
import * as React from "react";
import {useState} from "react";

type SelectMask = 'country'| 'mymask';
export default function SelectMask () {

    const [State, setState] = React.useState(false);
    const StateHC = (bool:boolean) => {
        setState(bool)
    }

    const theme = useTheme()
    const [selectMask, setSelectMask] = useState<SelectMask>("country");
    return(
        <>
            <Box sx={{
                display: "flex",
                gap: "10px",
            }}>
                <SelectableButton isSelected={selectMask === "country"} onClick={() => setSelectMask("country")}>
                    Выбор страны
                </SelectableButton>
                <SelectableButton isSelected={selectMask === "mymask"} onClick={() => setSelectMask("mymask")}>
                    Своя маска
                </SelectableButton>
            </Box>
            {selectMask === 'country' ?
                <>
                    <Typography>
                        Посетителю нужно будет выбрать страну
                        и ввести номер телефона. Страна определяется автоматически в зависимости от настроек браузера
                    </Typography>
                    <Link
                        component="button"
                        variant="body2"
                        sx={{color: theme.palette.brightPurple.main, textAlign: 'left'}}
                        onClick={() => {
                            StateHC(!State)
                        }}
                    >
                        Расширенные настройки
                    </Link>
                    {State ?
                        <Box sx={{display: 'flex', flexDirection: 'column', gap: '20px'}}>
                            <Box sx={{display: 'flex', flexDirection: 'column', gap: '10px'}}>
                                <Typography>Страна по умолчанию</Typography>
                                <CustomTextField placeholder={'Введите страну на английском языке'}/>
                                <Typography sx={{fontSize: "12px", lineHeight: "14px"}}>Если ничего не выбрано, страна будет выбрана автоматически</Typography>
                            </Box>
                            <Box sx={{display: 'flex', flexDirection: 'column', gap: '10px'}}>
                                <Typography>Выделенные страны</Typography>
                                <CustomTextField placeholder={'Введите страну на английском языке'}/>
                                <Typography sx={{fontSize: "12px", lineHeight: "14px"}}>Выбранные страны будут показываться вверху списка</Typography>
                            </Box>
                            <Box sx={{display: 'flex', flexDirection: 'column', gap: '10px'}}>
                                <Typography>Показываемые страны</Typography>
                                <CustomTextField placeholder={'Введите страну на английском языке'}/>
                                <Typography sx={{fontSize: "12px", lineHeight: "14px"}}>Будут показываться только выбранные страны</Typography>
                            </Box>
                            <Box sx={{display: 'flex', flexDirection: 'column', gap: '10px'}}>
                                <Typography>Игнорируемые страны</Typography>
                                <CustomTextField placeholder={'Введите страну на английском языке'}/>
                                <Typography sx={{fontSize: "12px", lineHeight: "14px"}}>Выбранные страны будут не будут показываться в списке</Typography>
                            </Box>
                        </Box>
                        :
                        <></>
                    }

                </>
                :
                <>
                    <CustomTextField placeholder={''} text={'+7 900 000 00 00'}/>
                </>
            }
        </>
    )
}