import {
    Box,
    FormControl,
    FormControlLabel,
    Link,
    Radio,
    RadioGroup,
    TextField,
    Typography,
    useTheme
} from "@mui/material";
import InstallQzOnSiteParent from "./InstallQzOnSiteParent";
import React from "react";
import BannerImg from "../../assets/BannerImg.png"
import CustomTextField from "@ui_kit/CustomTextField";
import Dots from "../../assets/dots.png";
import CustomCheckbox from "@ui_kit/CustomCheckbox";
import Accordion from "@mui/material/Accordion";
import AccordionSummary from "@mui/material/AccordionSummary";
import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
import AccordionDetails from "@mui/material/AccordionDetails";



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

    const [value, setValue] = React.useState("1");

    const handleChangeRadio = (event: React.ChangeEvent<HTMLInputElement>) => {
        setValue((event.target as HTMLInputElement).value);
    };

    const [value2, setValue2] = React.useState("1");

    const handleChangeRadio2 = (event: React.ChangeEvent<HTMLInputElement>) => {
        setValue2((event.target as HTMLInputElement).value);
    };

    const [expanded, setExpanded] = React.useState<string | false>("panel1");

    const handleChange =
        (panel: string) => (event: React.SyntheticEvent, isExpanded: boolean) => {
            setExpanded(isExpanded ? panel : false);
        };

    return (
        <InstallQzOnSiteParent>
            {/*левая часть*/}
            <Box sx={{maxWidth: '560px'}}>

                <img src={BannerImg}/>
                <Typography sx={{fontSize: '14px', color: theme.palette.grey2.main}}>
                    Если квиз уже установлен на сайт, и вы что-то здесь изменили, код на сайте нужно будет поменять.
                    Настройки в этом конструкторе не сохраняются.
                </Typography>
            </Box>
            {/*правая часть*/}
            <Box sx={{display: "flex", flexDirection: "column", }}>
                <Box sx={{display: "flex", flexDirection: "column", gap: "15px"}}>
                    <Typography sx={{color: theme.palette.grey2.main}}>Текст-призыв</Typography>
                    <CustomTextField placeholder={"Пройти тест"}/>
                    <Typography sx={{color: theme.palette.grey2.main}}>Заголовок квиза</Typography>
                    <CustomTextField placeholder={"Заголовок квиза"}/>
                    <Box sx={{display: "flex", gap: "10px", alignItems: "center"}}>
                        <Typography sx={{color: theme.palette.grey2.main}}>Показывать через</Typography>
                        <FormControl
                            fullWidth
                            variant="standard"
                            sx={{ p: 0, width: "60px", }}
                        >
                            <TextField
                                fullWidth
                                placeholder="20"
                                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',
                            gap: '40px'
                        }}
                    >
                        <Typography sx={{color: theme.palette.grey2.main}}>Цвет кнопки</Typography>
                        <Box sx={{width: "20px", height: "20px", borderRadius: "50%", backgroundColor: theme.palette.brightPurple.main, border: "1px solid #4D4D4D"}}> </Box>
                        <Typography sx={{color: theme.palette.grey2.main}}>Цвет текста кнопки</Typography>
                        <Box sx={{width: "20px", height: "20px", borderRadius: "50%", backgroundColor: "#ffffff", border: "1px solid #4D4D4D"}}> </Box>
                    </Box>
                </Box>


                <Accordion expanded={expanded === 'panel1'} onChange={handleChange('panel1')} sx={{boxShadow: "none", "&.css-14nk2kd-MuiPaper-root-MuiAccordion-root::before": {display: "none", backgroundColor: "none"}, margin: 0}}>
                    <AccordionSummary
                        expandIcon={<ExpandMoreIcon />}
                        aria-controls="panel1bh-content"
                        id="panel1bh-header"
                        sx={{"&.css-o4b71y-MuiAccordionSummary-content.Mui-expanded": {margin: 0}}}
                    >
                        <Typography sx={{padding: '10px 0'}}>Баннер сбоку экрана</Typography>
                    </AccordionSummary>
                    <AccordionDetails sx={{display: "flex", flexDirection: 'column',}}>
                        <Typography sx={{color: theme.palette.grey2.main}}>Расположение</Typography>
                        <FormControl>
                            <RadioGroup
                                aria-labelledby="demo-controlled-radio-buttons-group"
                                name="controlled-radio-buttons-group"
                                value={value}
                                onChange={handleChangeRadio}
                                sx={{maxWidth: "365px", display: "flex", flexWrap: "wrap", flexDirection: "row"}}
                            >
                                <FormControlLabel
                                    sx={{ color: theme.palette.grey2.main }}
                                    value="1"
                                    control={<Radio />}
                                    label="Слева сверху"
                                />
                                <FormControlLabel
                                    sx={{ color: theme.palette.grey2.main }}
                                    value="2"
                                    control={<Radio />}
                                    label="Справа сверху"
                                />
                                <FormControlLabel
                                    sx={{ color: theme.palette.grey2.main }}
                                    value="3"
                                    control={<Radio />}
                                    label="Слева снизу"
                                />
                                <FormControlLabel
                                    sx={{ color: theme.palette.grey2.main }}
                                    value="4"
                                    control={<Radio />}
                                    label="Справа снизу"
                                />
                            </RadioGroup>
                        </FormControl>
                        <Typography sx={{color: theme.palette.grey2.main}}>Параметры</Typography>
                        <CustomCheckbox label={"Закругленная"}/>
                        <CustomCheckbox label={"С тенью"}/>
                        <CustomCheckbox label={"С бликом"}/>
                        <CustomCheckbox label={'Эффект "пульсация"'}/>
                        <CustomCheckbox label={"Отключить на мобильных устройствах"}/>
                    </AccordionDetails>
                </Accordion>
                <Accordion expanded={expanded === 'panel2'} onChange={handleChange('panel2')} sx={{boxShadow: "none", borderTop: '1px solid #9A9AAF', borderBottom: '1px solid #9A9AAF', borderRadius: 0}}>
                    <AccordionSummary
                        expandIcon={<ExpandMoreIcon />}
                        aria-controls="panel2bh-content"
                        id="panel2bh-header"
                        sx={{margin: 0}}
                    >
                        <Typography>Баннер на всю ширину экрана</Typography>

                    </AccordionSummary>
                    <AccordionDetails sx={{display: "flex", flexDirection: 'column',}}>
                        <Typography sx={{color: theme.palette.grey2.main}}>Расположение</Typography>

                        <FormControl>
                            <RadioGroup
                                aria-labelledby="demo-controlled-radio-buttons-group"
                                name="controlled-radio-buttons-group"
                                value={value2}
                                onChange={handleChangeRadio2}
                                sx={{maxWidth: "365px", display: "flex", flexWrap: "wrap", flexDirection: "row"}}
                            >
                                <FormControlLabel
                                    sx={{ color: theme.palette.grey2.main }}
                                    value="1"
                                    control={<Radio />}
                                    label="Сверху страницы"
                                />
                                <FormControlLabel
                                    sx={{ color: theme.palette.grey2.main }}
                                    value="2"
                                    control={<Radio />}
                                    label="Снизу страницы"
                                />
                            </RadioGroup>
                        </FormControl>

                        <Typography sx={{color: theme.palette.grey2.main}}>Параметры</Typography>
                        <CustomCheckbox label={"С тенью"}/>
                        <CustomCheckbox label={"С бликом"}/>
                        <CustomCheckbox label={'Эффект "пульсация"'}/>
                        <CustomCheckbox label={"Отключить на мобильных устройствах"}/>

                    </AccordionDetails>
                </Accordion>
                <Link
                    component='button'
                    // onClick={}
                    sx={{
                        fontSize: "16px",
                        lineHeight: "19px",
                        color: theme.palette.brightPurple.main,
                        textDecorationColor: theme.palette.brightPurple.main,
                        textAlign: 'left'
                    }}>+ Автооткрытие квиза</Link>
            </Box>
        </InstallQzOnSiteParent>
    )
}