import {Box, Button, Link, Typography, useTheme} from "@mui/material";
import React, {useState} from "react";
import CustomCheckbox from "@ui_kit/CustomCheckbox";
import CustomTextField from "@ui_kit/CustomTextField";
import Dots from '../../assets/dots.png'
import InstallQzOnSiteParent from "./InstallQzOnSiteParent";
import AccordMy from "@ui_kit/Accordion";

type isExpanded = "panel1" | "panel2"

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

    const [isExpanded, setIsExpanded] = useState<isExpanded>("panel1");
    return (
        <>
            <InstallQzOnSiteParent>
                    {/*левая часть*/}
                    <Box sx={{maxWidth: '560px'}}>
                        {/*бокс с кнопкой*/}
                        <Box
                            sx={{
                                border: '1.5px solid #9A9AAF',
                                borderRadius: '6px',
                                maxWidth: '560px',
                                height: '364px',
                                // height: '100%'
                            }}
                        >
                            <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',
                                    height: '100%'
                                }}
                            >
                                <Button variant='contained'>Пройти тест</Button>
                            </Box>
                        </Box>
                        <Typography sx={{fontSize: '14px', color: theme.palette.grey2.main}}>Если quiz уже установлен на сайт, и вы что-то здесь изменили,
                            код на сайте нужно будет поменять. Настройки в этом конструкторе не сохраняются.
                        </Typography>
                    </Box>
                    {/*правая часть*/}
                    <Box sx={{
                        display: 'flex',
                        flexDirection: 'column',
                        width: "100%"
                    }}>
                        <AccordMy header={"Конструктор кнопки"} isExpanded={isExpanded === "panel1"} onClick={() => setIsExpanded("panel1")} sx={{display: "flex", flexDirection: 'column',}}>
                                <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>
                                <CustomCheckbox label={'Отключить на мобильных устройствах'}/>
                                <CustomCheckbox label={'Закругленная'}/>
                                <CustomCheckbox label={'С тенью'}/>
                                <CustomCheckbox label={'С бликом'}/>
                                <CustomCheckbox label={'Фиксированная'}/>
                                <Typography sx={{color: theme.palette.grey2.main, marginBottom: '14px'}}>Текст кнопки</Typography>
                                <CustomTextField placeholder={'Пройти тест'}/>
                        </AccordMy>
                        <AccordMy header={"Своя кнопка"} isExpanded={isExpanded === "panel2"} onClick={() => setIsExpanded("panel2")} sx={{display: "flex", flexDirection: 'column', width: "100%"}}>
                            <Typography sx={{color: theme.palette.grey2.main}}>Ссылка для вашей кнопки</Typography>
                            <CustomTextField placeholder={""} text={"#popup:639727c5177be5004f11a0f2"} />
                            <Typography sx={{color: theme.palette.grey2.main}}>Или событие</Typography>
                            <CustomTextField placeholder={""} text={"onclick=\":639727c5177be5004f11a0f2"} />
                        </AccordMy>

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