import * as React from 'react';
import Box from '@mui/material/Box';
import Button from '@mui/material/Button';
import {Typography, useTheme} from "@mui/material";
import CloseIcon from '@mui/icons-material/Close';
import CustomTextField from "@ui_kit/CustomTextField";
import CustomCheckbox from "@ui_kit/CustomCheckbox";
import SelectableButton from "@ui_kit/SelectableButton";
import {useState} from "react";
import SelectMask from "../SelectMask";

type SelectMessenger = 'contact'| 'bot';
export default function WindowMessengers() {
    const theme = useTheme();
    const [selectMessenger, setSelectMessenger] = useState<SelectMessenger>("contact");
    return(
        <>
            <Box sx={{padding: '10px 10px 10px 20px', display: 'flex', justifyContent: 'space-between', alignItems: 'center', background: theme.palette.background.default}}>
                <Typography>Настройки мессенджеров</Typography>
                <Button sx={{padding: 0}}><CloseIcon fontSize='large'/></Button>
            </Box>
             <Box sx={{padding: '20px', display: 'flex', flexDirection: 'column', gap: '20px'}}>
                 <Typography>Заголовок страницы мессенджеров</Typography>
                 <CustomTextField placeholder={'Куда присылать результаты'}/>
                 <Typography>Текст на кнопке</Typography>
                 <CustomTextField placeholder={'Готово'}/>
                 <CustomCheckbox label={'Спрашивать имя'}/>
             </Box>
            <Box sx={{
                display: "flex",
                gap: "10px",
                padding: '0 20px'
            }}>
                <SelectableButton isSelected={selectMessenger === "contact"} onClick={() => setSelectMessenger("contact")}>
                    Запрашивать контакт
                </SelectableButton>
                <SelectableButton isSelected={selectMessenger === "bot"} onClick={() => setSelectMessenger("bot")}>
                    Чат-бот
                </SelectableButton>
            </Box>
            {selectMessenger === 'contact' ?
                <>
                    <Box sx={{padding: '20px', display: 'flex'}}>
                        <Box>

                            <CustomCheckbox label={'Telegram'}/>
                            <CustomCheckbox label={'WhatsApp'}/>
                            <CustomCheckbox label={'Skype'}/>
                        </Box>
                        <Box>
                            <CustomCheckbox label={'Viber'}/>
                            <CustomCheckbox label={'VKontakte'}/>
                            <CustomCheckbox label={'Телефон'}/>
                        </Box>
                    </Box>
                    <Box sx={{padding: '20px', display: 'flex', flexDirection: 'column', gap: '20px'}}>
                        <SelectMask/>
                    </Box>

                </>
                :
                <></>
            }
            <Button variant='contained' sx={{maxWidth: '125px', margin: '20px'}}>Добавить</Button>
        </>
    )
}