import {Box, Checkbox, FormControl, FormControlLabel, TextField, Typography, useTheme} from "@mui/material";
import Dots from "../../assets/dots.png";
import React from "react";
import InstallQzOnSiteParent from "./InstallQzOnSiteParent";
import CustomCheckbox from "@ui_kit/CustomCheckbox";
import InfoIcon from "../../assets/icons/InfoIcon";

export default function AutoOpenInstall () {
    const theme = useTheme();

    const [checked, setChecked] = React.useState([true, false]);

    const handleChange1 = (event: React.ChangeEvent<HTMLInputElement>) => {
        setChecked([event.target.checked, checked[1]]);
    };

    const handleChange2 = (event: React.ChangeEvent<HTMLInputElement>) => {
        setChecked([checked[0], event.target.checked, ]);
    };

    return (
        <InstallQzOnSiteParent>
            {/*левая часть*/}
            <Box sx={{maxWidth: '560px'}}>
                {/*бокс с кнопкой*/}
                <Box
                    sx={{
                        border: '1.5px solid #9A9AAF',
                        borderRadius: '6px',
                        maxWidth: '560px',
                        height: '364px',
                    }}
                >
                    <Box
                        sx={{
                            background: theme.palette.background.default,
                            borderBottom: '1.5px solid #9A9AAF',
                            borderRadius: '6px 6px 0px 0px',
                            minHeight: '34px',
                            display: 'flex',
                            alignItems: 'center',
                            justifyContent: 'end',
                            paddingRight: '10px'
                        }}
                    > <img src={Dots}/></Box>
                    <Box
                        sx={{
                            display: "flex",
                            justifyContent: "center",
                            alignItems: "center",
                            minHeight: "330px"
                        }}
                    >
                        <Box sx={{
                            display: "flex",
                            justifyContent: "center",
                            alignItems: "center",
                            width: "100%",
                            maxWidth: "506px",
                            minHeight: "280px",
                            background: "#EEE4FC",
                            borderRadius: "6px",
                            border: "1px dashed #7E2AEA"
                        }}>
                            <Typography sx={{color: theme.palette.brightPurple.main}}>
                                Квиз будет открываться через указанное время
                            </Typography>
                        </Box>
                    </Box>
                </Box>
                <Typography sx={{fontSize: '14px', color: theme.palette.grey2.main}}>Если квиз уже установлен на
                    сайт, и вы что-то здесь изменили,
                    код на сайте нужно будет поменять. Настройки в этом конструкторе не сохраняются.
                </Typography>
            </Box>
            {/*правая часть*/}
            <Box sx={{display: "flex", flexDirection: "column", gap: "15px"}}>
                <Box sx={{display: "flex", alignItems: "center"}}>
                    <CustomCheckbox label={"Автооткрытие квиза"} checked={checked[0]} handleChange={handleChange1}/>
                    <InfoIcon/>
                </Box>
                <Box sx={{display: "flex", alignItems: "center"}} >
                    <CustomCheckbox label={"Открывать квиз при попытке уйти с сайта"} checked={checked[1]} handleChange={handleChange2}/>
                    <InfoIcon/>
                </Box>
                {checked[0] ?
                    <Box>
                        <Box sx={{padding: "15px 0", display: "flex", gap: "10px", alignItems: "center", borderTop: "1px solid #9A9AAF"}}>
                            <Typography sx={{color: theme.palette.grey2.main}}>Показывать через</Typography>
                            <FormControl
                                fullWidth
                                variant="standard"
                                sx={{ p: 0, width: "60px", }}
                            >
                                <TextField
                                    fullWidth
                                    placeholder="10"
                                    sx={{
                                        "& .MuiInputBase-root": {
                                            backgroundColor: theme.palette.background.default,
                                            height: "48px",
                                            width: "60px",
                                            borderRadius: "10px",

                                        },
                                    }}
                                    inputProps={{
                                        sx: {
                                            borderRadius: "10px",
                                            fontSize: "18px",
                                            lineHeight: "21px",
                                            py: 0,

                                        }
                                    }}
                                />
                            </FormControl>
                            <Typography sx={{color: theme.palette.grey2.main}}>секунд</Typography>
                        </Box>
                        <Box sx={{display: "flex", flexDirection: "column", }}>
                            <CustomCheckbox label={"Открывать каждый раз"}/>
                            <CustomCheckbox label={"Отключать автооткрытие на мобильных устройствах"}/>
                        </Box>

                    </Box>
                    :
                    <></>
                }

                {checked[1] ?
                    <Box sx={{
                        borderTop: "1px solid #9A9AAF",
                        display: "flex",
                        flexDirection: "column",
                        padding: "15px 0"
                    }}>
                        <CustomCheckbox label={"Открывать каждый раз"}/>
                        <CustomCheckbox label={"Отключать автооткрытие на мобильных устройствах"}/>
                    </Box>
                    :
                    <></>
                }
            </Box>
        </InstallQzOnSiteParent>
    )
}
