frontPanel/src/pages/InstallQuiz/OnButtonInstall.tsx

import {Box, Button, Link, Typography, useTheme} from "@mui/material";
import OneIconBorder from "../../assets/icons/OneIconBorder";
import React 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 Accordion from '@mui/material/Accordion';
import AccordionDetails from '@mui/material/AccordionDetails';
import AccordionSummary from '@mui/material/AccordionSummary';
import ExpandMoreIcon from '@mui/icons-material/ExpandMore';


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

    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'}}>
                        {/*бокс с кнопкой*/}
                        <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}}>Если квиз уже установлен на сайт, и вы что-то здесь изменили,
                            код на сайте нужно будет поменять. Настройки в этом конструкторе не сохраняются.
                        </Typography>
                    </Box>
                    {/*правая часть*/}
                    <Box sx={{
                        display: 'flex',
                        flexDirection: 'column',
                    }}>
                        <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',}}>
                                <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={'Пройти тест'}/>
                            </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"
                            >
                                <Typography>Своя кнопка</Typography>
                            </AccordionSummary>
                            <AccordionDetails>
                                <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"} />

                            </AccordionDetails>
                        </Accordion>


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