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


export default function InBodyInstall () {
    const theme = useTheme();
    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",
                            flexDirection: "column",
                            justifyContent: "center",
                            alignItems: "center",
                            gap: "40px",
                            height: "100%"
                        }}
                    >
                        <Box sx={{display: "flex",
                            justifyContent: "center",
                            alignItems: "center",
                            width: "100%",
                            maxWidth: "413px",
                            minHeight: "133px",
                            background: "#EEE4FC",
                            borderRadius: "6px",
                            border: "1px dashed #7E2AEA"
                        }}>
                            <Typography sx={{color: theme.palette.brightPurple.main, maxWidth: "365px"}}>
                                Quiz будет открыть прямо в том месте, где вы установите код на сайте
                            </Typography>
                        </Box>

                        <Typography sx={{maxWidth: "414px", fontSize: "14px"}}>В мобильной версии будет показана кнопка, открывающая quiz в модальном окне</Typography>
                    </Box>
            </Box>
                <Typography sx={{fontSize: '14px', color: theme.palette.grey2.main}}>Если quiz уже установлен на сайт, и вы что-то здесь изменили,
                    код на сайте нужно будет поменять. Настройки в этом конструкторе не сохраняются.
                </Typography>
            </Box>

            {/*правая часть*/}
            <Box sx={{display: "flex", flexDirection: "column", gap: "15px"}}>
                <Typography>1. Задайте размеры (опционально)</Typography>
                <Box sx={{display: "flex", gap: "40px"}}>
                    <Box sx={{display: "flex", flexDirection: "column", gap: "20px"}}>
                        <Typography sx={{color: theme.palette.grey2.main}}>Ширина (px)</Typography>
                        <CustomTextField placeholder={"auto"}/>
                        <Typography sx={{color: theme.palette.grey2.main}}>Радиус (px)</Typography>
                        <CustomTextField placeholder={"0"}/>
                    </Box>
                    <Box sx={{display: "flex", flexDirection: "column", gap: "20px"}}>
                        <Typography sx={{color: theme.palette.grey2.main}}>Высота (px)</Typography>
                        <CustomTextField placeholder={"auto"}/>
                        <Typography sx={{color: theme.palette.grey2.main}}>Отступ (px)</Typography>
                        <CustomTextField placeholder={"0"}/>
                    </Box>
                </Box>
                <Box sx={{display: "flex", flexDirection: "column", gap: "15px"}}>
                    <Typography>
                        2. Настройте кнопку для мобильной версии
                    </Typography>
                    <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}}>
                        Текст кнопки
                    </Typography>
                    <CustomTextField placeholder={"Пройти тест"}/>
                    <Link
                        component='button'
                        // onClick={}
                        sx={{
                            fontSize: "16px",
                            lineHeight: "19px",
                            color: theme.palette.brightPurple.main,
                            textDecorationColor: theme.palette.brightPurple.main,
                            textAlign: 'left'
                        }}>+ Автооткрытие quiz</Link>
                </Box>
            </Box>
        </InstallQzOnSiteParent>

    )
}