import {
    Box,
    FormControl,
    FormControlLabel,
    Link,
    Radio,
    RadioGroup,
    TextField,
    Typography,
    useTheme
} from "@mui/material";
import InstallQzOnSiteParent from "./InstallQzOnSiteParent";
import React, {useState} from "react";
import BannerImg from "../../assets/BannerImg.png"
import CustomTextField from "@ui_kit/CustomTextField";
import CustomCheckbox from "@ui_kit/CustomCheckbox";
import RadioCheck from "@ui_kit/RadioCheck";
import RadioIcon from "@ui_kit/RadioIcon";
import AccordMy from "@ui_kit/Accordion";


type isExpanded = "panel1" | "panel2"
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 [isExpanded, setIsExpanded] = useState<isExpanded>("panel1");

    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>

                <AccordMy header={"Баннер сбоку экрана"} isExpanded={isExpanded === "panel1"} onClick={() => setIsExpanded("panel1")} 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: "380px", display: "flex", flexWrap: "wrap", flexDirection: "row", paddingLeft: "5px", justifyContent: "space-between"}}
                        >
                            <Box sx={{display: "flex", flexDirection: "column"}}>
                                <FormControlLabel
                                    sx={{ color: theme.palette.grey2.main }}
                                    value="1"
                                    control={<Radio checkedIcon={<RadioCheck/>} icon={<RadioIcon/>}/>}
                                    label="Слева сверху"
                                />
                                <FormControlLabel
                                    sx={{ color: theme.palette.grey2.main }}
                                    value="2"
                                    control={<Radio checkedIcon={<RadioCheck/>} icon={<RadioIcon/>}/>}
                                    label="Справа сверху"
                                />
                            </Box>
                            <Box sx={{display: "flex", flexDirection: "column"}}>
                                <FormControlLabel
                                    sx={{ color: theme.palette.grey2.main }}
                                    value="3"
                                    control={<Radio checkedIcon={<RadioCheck/>} icon={<RadioIcon/>}/>}
                                    label="Слева снизу"
                                />
                                <FormControlLabel
                                    sx={{ color: theme.palette.grey2.main }}
                                    value="4"
                                    control={<Radio checkedIcon={<RadioCheck/>} icon={<RadioIcon/>}/>}
                                    label="Справа снизу"
                                />
                            </Box>


                        </RadioGroup>
                    </FormControl>
                    <Typography sx={{color: theme.palette.grey2.main}}>Параметры</Typography>
                    <CustomCheckbox label={"Закругленная"}/>
                    <CustomCheckbox label={"С тенью"}/>
                    <CustomCheckbox label={"С бликом"}/>
                    <CustomCheckbox label={'Эффект "пульсация"'}/>
                    <CustomCheckbox label={"Отключить на мобильных устройствах"}/>
                </AccordMy>
                <AccordMy header={"Баннер на всю ширину экрана"} isExpanded={isExpanded === "panel2"} onClick={() => setIsExpanded("panel2")} 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", paddingLeft: "5px",}}
                        >
                            <FormControlLabel
                                sx={{ color: theme.palette.grey2.main }}
                                value="1"
                                control={<Radio checkedIcon={<RadioCheck/>} icon={<RadioIcon/>}/>}
                                label="Сверху страницы"
                            />
                            <FormControlLabel
                                sx={{ color: theme.palette.grey2.main }}
                                value="2"
                                control={<Radio checkedIcon={<RadioCheck/>} icon={<RadioIcon/>}/>}
                                label="Снизу страницы"
                            />
                        </RadioGroup>
                    </FormControl>

                    <Typography sx={{color: theme.palette.grey2.main}}>Параметры</Typography>
                    <CustomCheckbox label={"С тенью"}/>
                    <CustomCheckbox label={"С бликом"}/>
                    <CustomCheckbox label={'Эффект "пульсация"'}/>
                    <CustomCheckbox label={"Отключить на мобильных устройствах"}/>
                </AccordMy>
                <Link
                    component='button'
                    // onClick={}
                    sx={{
                        fontSize: "16px",
                        lineHeight: "19px",
                        color: theme.palette.brightPurple.main,
                        textDecorationColor: theme.palette.brightPurple.main,
                        textAlign: 'left',
                        padding: "15px 0",
                    }}>+ Автооткрытие квиза</Link>
            </Box>
        </InstallQzOnSiteParent>
    )
}