import * as React from 'react';
import NewFieldParent from "./NewFieldParent";
import {FormControlLabel, Switch} from "@mui/material";
import SelectMask from "../SelectMask";



interface Props {
    switchState: string,
}


export default function SwitchNewField({switchState ='name'}: Props) {
    const [SwitchMask, setSwitchMask] = React.useState(false);
    const SwitchMaskHC = (bool:boolean) => {
        setSwitchMask(bool)
    }

    switch (switchState) {
        case 'name':
            return (<NewFieldParent placeholderHelp={'Введите имя'} placeholderField={'Дмитрий'} defaultValue={'name'}/>);
            break;
        case 'email':
            return (<NewFieldParent placeholderHelp={'Введите Email'} placeholderField={'mail@example.ru'} defaultValue={'email'}/>);
            break;
        case 'phone':

            return (
                <NewFieldParent placeholderHelp={'Введите номер'} placeholderField={'+7 900 000 00 00'} defaultValue={'phone'}>
                    <FormControlLabel
                        value="start"
                        control={<Switch color="primary" />}
                        label="Маска для телефона"
                        labelPlacement="start"
                        sx={{
                            display: 'flex',
                            justifyContent: 'space-between'
                        }}
                        onClick={() => {
                            SwitchMaskHC(!SwitchMask)
                        }}

                    />
                    {SwitchMask ?
                        <SelectMask/>
                        :
                        <></>
                    }
                </NewFieldParent>
            );
            break;
        case 'text':
            return (<NewFieldParent placeholderHelp={'Введите фамилию'} placeholderField={'Иванов'} defaultValue={'text'}/>);
            break;
        case 'address':
            return (<NewFieldParent placeholderHelp={'Введите адрес'} placeholderField={'Москва, Лаврушинский пер., 10'} defaultValue={'address'}/>);
            break;
        default:
            return (<></>)
    }
}