import React from "react";
import Stepper from '@ui_kit/Stepper';
import {Box, Button, IconButton, Typography, Paper, useTheme, Link, SxProps, Theme, TextField} from '@mui/material';
import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
import CustomTextField from "@ui_kit/CustomTextField";
import OneIcon from "../../components/icons/questionsPage/OneIcon";
import AddPlus from "../../components/icons/questionsPage/addPlus";
import ArrowLeft from "../../components/icons/questionsPage/arrowLeft";
import InfoIcon from "@icons/InfoIcon";
import ButtonSettingForms from "./ButtonSettingForms";
import SwitchContactForm from "./switchContactForm";
import DrawerNewField from "./DrawerParent";
import WindowNewField from "./NewField/WindowNewField";
import WindowMessengers from "./Massengers/WindowMessengers";



export default function ContactFormPage() {


    const [activeStep, setActiveStep] = React.useState(4);

    const handleNext = () => {
        setActiveStep((prevActiveStep) => prevActiveStep + 1);
    };

    const handleBack = () => {
        setActiveStep((prevActiveStep) => prevActiveStep - 1);
    };

    const [drawerNewField, setDrawerNewField] = React.useState(false);
    const [drawerMessenger, setDrawerMessenger] = React.useState(false);

    const drawerNewFieldHC = (bool:boolean) => {setDrawerNewField(bool)}
    const drawerMessengerHC = (bool:boolean) => {setDrawerMessenger(bool)}

    const theme = useTheme();
    return (
        <>
            <Stepper activeStep={activeStep} desc={"Настройте форму контактов"}/>
            <Box sx={{display: 'flex', alignItems: 'center', gap: '10px'}}>
                <Link sx={{
                    fontSize: "16px",
                    lineHeight: "19px",
                    color: theme.palette.brightPurple.main,
                    textDecorationColor: theme.palette.brightPurple.main
                }}>Как собрать данные посетителя</Link> <InfoIcon/>
            </Box>
            <ContactFormParent>
                <Box sx={{display: 'flex', alignItems: 'center', justifyContent: 'end'}}>
                    <OneIcon/>
                    <IconButton> <ExpandMoreIcon /> </IconButton>
                </Box>
                <Box sx={{display: 'flex', flexDirection: 'column', gap: '20px', padding: '10px 20px'}}>
                    <Typography>Имя*</Typography>
                    <CustomTextField placeholder="Дмитрий" text={""} />
                    <Typography>E-mail*</Typography>
                    <CustomTextField placeholder="+7 900 000 00 00" text={""} />
                    <Typography>Телефон*</Typography>
                    <CustomTextField placeholder="+7 900 000 00 00" text={""} />
                    <Button onClick={() => drawerNewFieldHC(true)} variant='contained' sx={{maxWidth: 'fit-content', padding: '10px 20px'}}>
                        Добавить поле +
                    </Button>
                    <DrawerNewField isOpen={drawerNewField} openHC={drawerNewFieldHC}><WindowNewField/></DrawerNewField>
                    <Link
                        component='button'
                        onClick={() => drawerMessengerHC(true)}
                        sx={{
                        fontSize: "16px",
                        lineHeight: "19px",
                        color: theme.palette.brightPurple.main,
                        textDecorationColor: theme.palette.brightPurple.main,
                            textAlign: 'left'
                    }}>Добавить мессенджеры</Link>
                    <DrawerNewField isOpen={drawerMessenger} openHC={drawerMessengerHC}>

                    <WindowMessengers/>
                    </DrawerNewField>

                    <Button variant='contained' sx={{padding: '10px 20px', maxWidth: 'fit-content',}}>
                        Название кнопки
                    </Button>

                </Box>
            </ContactFormParent>


            <ContactFormParent>
                <Box sx={{display: 'flex', alignItems: 'center', justifyContent: 'end'}}>
                    <OneIcon/>
                    <IconButton> <ExpandMoreIcon /> </IconButton>
                </Box>
                <Button variant='contained' sx={{maxWidth: 'fit-content', padding: '10px 20px'}}>
                    Добавить поле +
                </Button>
                <Box sx={{display: 'flex'}}>
                    <Typography sx={{color: theme.palette.orange.main}}>Будут показаны поля по умолчанию</Typography>
                    <InfoIcon/>
                </Box>
                <Link sx={{
                    mt: "20px",
                    fontSize: "16px",
                    lineHeight: "19px",
                    color: theme.palette.brightPurple.main,
                    textDecorationColor: theme.palette.brightPurple.main
                }}>Добавить мессенджеры</Link>
                <Button variant='contained' sx={{padding: '10px 20px', maxWidth: 'fit-content',}}>
                    Название кнопки
                </Button>
            </ContactFormParent>
            <Box sx={{display: 'flex',justifyContent: 'space-between', maxWidth: '796px'}}>
                <IconButton>
                    <AddPlus/>
                </IconButton>
                <Box sx={{display: 'flex', gap: '8px'}}>
                    <Button variant='outlined'>
                        <ArrowLeft/>
                    </Button>
                    <Button variant='contained' sx={{padding: '10px 20px'}}>
                        Установка квиза
                    </Button>
                </Box>
            </Box>
        </>
    )
}

interface Props {
    outerContainerSx?: SxProps<Theme>;
    children?: React.ReactNode;
}

function ContactFormParent({outerContainerSx: sx, children }: Props) {
    const theme = useTheme();
    const [switchState, setSwitchState] = React.useState('setting');
    const SSHC = (data: string) => {
        setSwitchState(data)
    }
    return(
        <Paper sx={{maxWidth: '796px', width: '100%', borderRadius: '12px', margin: '20px 0', display: 'flex', flexDirection: 'column'}}>
            <Box sx={{width: '100%', display: 'flex'}} >
                <Box
                    sx={{
                        borderRight: `1px solid ${theme.palette.grey2.main}`,
                        maxWidth: '386px',
                        width: '100%',
                        padding: '113px 20px 20px 20px',
                        display: 'flex',
                        flexDirection: 'column',
                        gap: '20px'
                    }}>
                    <CustomTextField placeholder="Заголовок формы" text={""}/>
                    <TextField
                        id="outlined-multiline-static"
                        multiline
                        rows={8}
                        placeholder="Дополнительный текст формы"
                        sx={{
                            backgroundColor: theme.palette.background.default,

                            "& .MuiInputBase-root": {
                                borderRadius: "10px",
                                alignItems: 'start',
                                color: theme.palette.grey2.main,
                            },
                        }}
                    />
                </Box>
                <Box sx={{display: 'flex', flexDirection: 'column', padding: '20px', width: '100%', gap: '20px'}}>
                    {children}
                </Box>
            </Box>
            <Box>
                <ButtonSettingForms switchState={switchState} SSHC={SSHC}/>
                <SwitchContactForm switchState={switchState}/>
            </Box>
        </Paper>
    )
}