import React from "react";
import Stepper from '@ui_kit/Stepper';
import {Box, Button, IconButton, Typography, Paper, useTheme, Link} from '@mui/material';
import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
import CustomTextField from "@ui_kit/CustomTextField";
import OneIcon from "../../components/icons/questionsPage/OneIcon";
import PointsIcon from "../../components/icons/questionsPage/PointsIcon";
import AddPlus from "../../components/icons/questionsPage/addPlus";
import ArrowLeft from "../../components/icons/questionsPage/arrowLeft";
import InfoIcon from "@icons/InfoIcon";

export default function ContactFormPage() {


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

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

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

    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>
            <Paper sx={{maxWidth: '796px', width: '100%', borderRadius: '12px', margin: '20px 0', 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={""}/>
                    <CustomTextField placeholder="Дополнительный текст формы" text={""}
                                     sx={{
                                         "& .MuiInputBase-root": {
                                             height: "48px",
                                             borderRadius: "10px",
                                             minHeight: '287px',
                                             alignItems: 'start',
                                         },
                                     }} />
                </Box>
                <Box sx={{display: 'flex', flexDirection: 'column', padding: '20px', width: '100%'}}>
                    <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 variant='main' sx={{maxWidth: 'fit-content', padding: '10px 20px'}}>
                            Добавить поле +
                        </Button>
                        <Link sx={{
                            mt: "20px",
                            fontSize: "16px",
                            lineHeight: "19px",
                            color: theme.palette.brightPurple.main,
                            textDecorationColor: theme.palette.brightPurple.main
                        }}>Добавить мессенджеры</Link>
                        <Button variant='main' sx={{padding: '10px 20px', maxWidth: 'fit-content',}}>
                            Название кнопки
                        </Button>
                    </Box>
                </Box>

                {/*<Box*/}
                {/*    sx={{width: '100%', maxWidth: "760px", display: 'flex', alignItems: 'center', gap: '10px', padding: '20px' }}*/}
                {/*>*/}
                {/*</Box>*/}


            </Paper>
            <Box sx={{display: 'flex',justifyContent: 'space-between', maxWidth: '796px'}}>
                <IconButton>
                    <AddPlus/>
                </IconButton>
                <Box sx={{display: 'flex', gap: '8px'}}>
                    <Button variant='outmain'>
                        <ArrowLeft/>
                    </Button>
                    <Button variant='main' sx={{padding: '10px 20px'}}>
                        Установка квиза
                    </Button>
                </Box>
            </Box>
        </>
    )
}