frontPanel/src/pages/InstallQuiz/InstallQuiz.tsx

import React, {useState} from "react";
import {
    Box, Button, ButtonBase,
    FormControl, IconButton, InputAdornment, Link,
    MenuItem, Modal, OutlinedInput,
    Paper,
    Select,
    SelectChangeEvent,
    TextField,
    Typography,
    useTheme
} from "@mui/material";
import Stepper from "@ui_kit/Stepper";
import LinkIcon from "../../assets/icons/LinkIcon";
import InfoIcon from "../../assets/icons/InfoIcon";
import ArrowDown from "../../assets/icons/ArrowDownIcon";
import CopyIcon from "../../assets/icons/CopyIcon";
import VkIcon from "../../assets/icons/VkIcon";
import DomenIcon from "../../assets/icons/DomenIcon";
import OnButton from '../../assets/OnButton.png';
import Bunner from '../../assets/Bunner.png';
import InBidySite from '../../assets/InBodySite.png';
import AutoOpen from '../../assets/AutoOpen.png';
import WidgetImg from '../../assets/Widget.png';
import OneIconBorder from "../../assets/icons/OneIconBorder";
import ArrowLeft from "../../assets/icons/questionsPage/arrowLeft";
import CustomButton from "../../components/CustomButton";
import CustomTextField from "@ui_kit/CustomTextField";
import VkIconButton from "../../assets/icons/VkIconButton";
import SelectableButton from "../../components/CreateQuiz/SelectableButton";
import ButtonSocial from "./ButtonSocial";
import OnButtonInstall from "./OnButtonInstall";
import BannerInstall from "./BannerInstall";
import InBodyInstall from "./InBodyInstall";
import AutoOpenInstall from "./AutoOpenInstall";
import VidjetInstall from "./VidjetInstall";
import InstallQzCode from "./InstallQzCode";

type BackgroundType = "text" | "video";

export default function InstallQuiz() {

    const buttonInstall: {icon: any; title: string; text: string} [] =[
        {icon: OnButton, title: 'По кнопке', text: 'Конструктор кнопки или собственная кнопка'},
        {icon: Bunner, title: 'Баннером', text: 'Сбоку или на всю ширину экрана'},
        {icon: InBidySite, title: 'В тело сайта', text: 'Задайте свои размеры и встройте в сайт'},
        {icon: AutoOpen, title: 'Автооткрытие', text: 'Автооткрытие поп-ап на сайте'},
        {icon: WidgetImg, title: 'Виджет', text: 'Сбоку страницы как консультант'},
    ]

    const [activeStep, setActiveStep] = React.useState(5);

    const handleNext = () => {
        setActiveStep((prevActiveStep) => prevActiveStep + 1);
    };

    const handleBack = () => {
        setActiveStep((prevActiveStep) => prevActiveStep - 1);
    };

    const [display, setDisplay] = React.useState('1');
    const handleChange = (event: SelectChangeEvent) => {
        setDisplay(event.target.value);
    }

    const [openVk, setOpenVk] = React.useState(false);
    const handleOpenVk = () => setOpenVk(true);
    const handleCloseVk = () => setOpenVk(false);


    const [openDom, setOpenDom] = React.useState(false);
    const handleOpenDom = () => setOpenDom(true);
    const handleCloseDom = () => setOpenDom(false);

    const [backgroundType, setBackgroundType] = useState<BackgroundType>("text");


    const theme = useTheme();
    return (
        <>
            <Stepper activeStep={activeStep} desc={"Установите квиз"}/>
            <Box sx={{marginTop: '60px', display: 'flex', gap: '40px',}}>
                <Paper sx={{maxWidth:'522px', width: "100%", padding: '20px', borderRadius: '12px', display: 'flex', flexDirection: 'column', gap: '30px', boxShadow: '0px 100px 309px rgba(210, 208, 225, 0.24), 0px 41.7776px 129.093px rgba(210, 208, 225, 0.172525), 0px 22.3363px 69.0192px rgba(210, 208, 225, 0.143066), 0px 12.5216px 38.6916px rgba(210, 208, 225, 0.12), 0px 6.6501px 20.5488px rgba(210, 208, 225, 0.0969343), 0px 2.76726px 8.55082px rgba(210, 208, 225, 0.0674749)'}}>
                    <Box sx={{display: 'flex', alignItems: 'center', gap: '10px'}}>
                        <LinkIcon color={theme.palette.brightPurple.main} bgcolor={'#EEE4FC'}/>
                        <Typography>Ссылка на квиз</Typography> <InfoIcon/>
                        <FormControl
                            fullWidth
                            size="small"
                            sx={{
                                width: "100%",
                                maxWidth: "180px",
                                height: "48px",
                                // margin: '0 10px'
                            }}
                        >
                            <Select
                                id="display-select"
                                variant="outlined"
                                value={display}
                                displayEmpty
                                onChange={handleChange}
                                sx={{
                                    height: "48px",
                                    borderRadius: "8px",
                                    "& .MuiOutlinedInput-notchedOutline": {
                                        border: 'none !important',
                                    },
                                }}
                                MenuProps={{
                                    PaperProps: {
                                        sx: {
                                            mt: "8px",
                                            p: "4px",
                                            borderRadius: "8px",

                                        },
                                    },
                                    MenuListProps: {
                                        sx: {
                                            py: 0,
                                            display: "flex",
                                            flexDirection: "column",
                                            gap: "8px",
                                            "& .Mui-selected": {
                                                backgroundColor: theme.palette.background.default,
                                                color: theme.palette.brightPurple.main,
                                            }
                                        },
                                    },
                                }}
                                inputProps={{
                                    sx: {
                                        color: theme.palette.brightPurple.main,
                                        display: "flex",
                                        alignItems: "center",
                                        px: "9px",
                                        gap: "20px",
                                    }
                                }}
                                IconComponent={props => <ArrowDown {...props} />}
                            >
                                <MenuItem
                                    value={1}
                                    sx={{
                                        display: "flex",
                                        alignItems: "center",
                                        gap: "20px",
                                        p: "4px",
                                        borderRadius: "5px",
                                        color: theme.palette.grey2.main,
                                    }}
                                >
                                    Стандартная
                                </MenuItem>
                                <MenuItem
                                    value={2}
                                    sx={{
                                        display: "flex",
                                        alignItems: "center",
                                        gap: "20px",
                                        p: "4px",
                                        borderRadius: "5px",
                                        color: theme.palette.grey2.main,
                                    }}
                                >
                                    На поддомене
                                </MenuItem>
                            </Select>
                        </FormControl>
                    </Box>
                    <Box sx={{display: 'flex', alignItems: "center" }}>
                        <FormControl
                            fullWidth
                            variant="standard"
                            sx={{ p: 0 }}
                        >
                            <TextField
                                disabled
                                id="outlined-disabled"
                                value='https://pena.com/'
                                sx={{
                                    "& .css-1d3z3hw-MuiOutlinedInput-notchedOutline": {
                                        border: 'none'
                                    },
                                    "& .MuiInputBase-root": {
                                        height: "48px",
                                        borderRadius: "10px 0 0 10px",
                                        backgroundColor: '#EEE4FC',
                                    },
                                }}
                            />
                            </FormControl>
                            <FormControl
                                fullWidth
                                variant="standard"
                                sx={{ p: 0 }}
                            >
                            <TextField
                                value=''
                                fullWidth
                                placeholder='6235840cc71'
                                sx={{
                                    "& .MuiInputBase-root": {
                                        backgroundColor: theme.palette.background.default,
                                        height: "48px",
                                        borderRadius: "0 10px 10px 0",

                                    },
                                }}
                                inputProps={{
                                    sx: {
                                        borderRadius: "0 10px 10px 0",
                                        fontSize: "18px",
                                        lineHeight: "21px",
                                        py: 0,

                                    }
                                }}
                            />
                        </FormControl>
                        <CopyIcon color={theme.palette.brightPurple.main} bgcolor={'#EEE4FC'} marL={"10px"}/>
                    </Box>
                    <Box sx={{display: 'flex', alignItems: 'center', justifyContent: 'space-between'}}>

                        <ButtonSocial/>

                        <Typography sx={{color: '#FC712F'}}>Не опубликован</Typography>
                    </Box>
                </Paper>
                <Paper sx={{maxWidth: '220px', width: "100%", padding: '20px', borderRadius: '12px', display: 'flex', flexDirection: 'column', gap: '18px', boxShadow: '0px 100px 309px rgba(210, 208, 225, 0.24), 0px 41.7776px 129.093px rgba(210, 208, 225, 0.172525), 0px 22.3363px 69.0192px rgba(210, 208, 225, 0.143066), 0px 12.5216px 38.6916px rgba(210, 208, 225, 0.12), 0px 6.6501px 20.5488px rgba(210, 208, 225, 0.0969343), 0px 2.76726px 8.55082px rgba(210, 208, 225, 0.0674749)'}}>
                    <Box sx={{display: 'flex', alignItems: 'center', gap: "10px"}}>
                        <VkIcon color={theme.palette.brightPurple.main} bgcolor={'#EEE4FC'}/>
                        <Typography> Вконтакте</Typography>
                    </Box>

                    <Typography>Для публикации сниппета на стене группы, призывающего пройти тест.</Typography>
                    <Link
                        component='button'
                        onClick={handleOpenVk}
                        sx={{
                            fontSize: "16px",
                            lineHeight: "19px",
                            color: theme.palette.brightPurple.main,
                            textDecorationColor: theme.palette.brightPurple.main,
                            textAlign: 'left'
                        }}>Подключить</Link>
                </Paper>
                <Paper sx={{maxWidth: '220px', width: "100%", padding: '20px', borderRadius: '12px', display: 'flex', flexDirection: 'column', gap: '18px', boxShadow: '0px 100px 309px rgba(210, 208, 225, 0.24), 0px 41.7776px 129.093px rgba(210, 208, 225, 0.172525), 0px 22.3363px 69.0192px rgba(210, 208, 225, 0.143066), 0px 12.5216px 38.6916px rgba(210, 208, 225, 0.12), 0px 6.6501px 20.5488px rgba(210, 208, 225, 0.0969343), 0px 2.76726px 8.55082px rgba(210, 208, 225, 0.0674749)'
                }}>
                    <Box sx={{display: 'flex', alignItems: 'center', gap: "10px"}}>
                        <DomenIcon color={theme.palette.brightPurple.main} bgcolor={'#EEE4FC'}/>
                        <Typography>Свой домен</Typography>
                    </Box>
                    <Typography>Подключите свой домен, если хотите, чтобы квиз открывался по вашей ссылке.</Typography>
                    <Link
                        component='button'
                        onClick={handleOpenDom}
                        sx={{
                            fontSize: "16px",
                            lineHeight: "19px",
                            color: theme.palette.brightPurple.main,
                            textDecorationColor: theme.palette.brightPurple.main,
                            textAlign: 'left'
                        }}>Подключить</Link>
                </Paper>
            </Box>
            <Box
                sx={{backgroundColor: '#ffffff',
                    padding: '20px',
                    mt: '40px',
                    borderRadius: '12px',
                    maxWidth: "1160px",
                    boxShadow: '0px 100px 309px rgba(210, 208, 225, 0.24), 0px 41.7776px 129.093px rgba(210, 208, 225, 0.172525), 0px 22.3363px 69.0192px rgba(210, 208, 225, 0.143066), 0px 12.5216px 38.6916px rgba(210, 208, 225, 0.12), 0px 6.6501px 20.5488px rgba(210, 208, 225, 0.0969343), 0px 2.76726px 8.55082px rgba(210, 208, 225, 0.0674749)'
            }}>
                <Box sx={{display:'flex', alignItems: 'center'}}>
                    <Typography variant='h5' sx={{paddingRight: '30px'}}>Установка квизов на сайте</Typography>
                    <OneIconBorder color={'#FC712F'}/>
                    <Typography sx={{color: '#FC712F'}}>Способ установки</Typography>
                </Box>

                <Box
                    sx={{
                        padding: '20px',
                        display: 'flex',
                        gap: '30px'
                    }}
                >
                    {buttonInstall.map( (e,i) => (
                        <ButtonBase
                            key={i}
                            // onClick={()=>{}}
                            sx={{
                                display: 'flex',
                                flexDirection: 'column',
                                justifyContent: 'start',
                                alignItems: 'start',
                                maxWidth: '205px',
                                gap: '15px'
                            }}
                        >
                            <img src={e.icon}/>
                            <Typography>{e.title}</Typography>
                            <Typography sx={{fontSize: '16px', color: theme.palette.grey2.main, textAlign: 'start'}}>{e.text}</Typography>
                        </ButtonBase>
                    ))}
                </Box>


            </Box>
            <OnButtonInstall/>
            <BannerInstall/>
            <InBodyInstall/>
            <AutoOpenInstall/>
            <VidjetInstall/>
            <InstallQzCode/>
            <Box sx={{display: 'flex', gap: '8px', justifyContent: 'end', mt: '30px'}}>
                <Button variant='outlined' sx={{padding: '10px 20px', borderRadius: '8px'}}>
                    <ArrowLeft/>
                </Button>
                <Button variant='contained'>
                    Запустить рекламу
                </Button>
            </Box>



            <Modal
                open={openVk}
                onClose={handleCloseVk}
                aria-labelledby="modal-modal-title"
                aria-describedby="modal-modal-description"
            >
                <Box sx={{position: 'absolute' as 'absolute',
                    top: '50%',
                    left: '50%',
                    transform: 'translate(-50%, -50%)',
                    maxWidth: '620px',
                    width: '100%',
                    bgcolor: 'background.paper',
                    borderRadius: '12px',

                    boxShadow: 24,
                    p: 0,}}>
                    <Box
                        sx={{display: 'flex',
                            padding: '20px',
                            borderRadius: '12px 12px 0 0',
                            background: theme.palette.background.default,
                        }}
                    >
                        <Typography sx={{color: theme.palette.grey2.main}}>Добавить квиз в группу ВК</Typography>
                    </Box>
                    <Box sx={{
                        padding: '20px',
                        display: 'flex',
                        flexDirection: 'column',
                        gap: '30px'
                    }}>
                        <Box sx={{
                            display: 'flex',
                            gap: '20px',
                            // alignItems: 'center',
                            flexDirection: 'column'
                        }}>
                            <Typography>1. Добавьте приложение в сообщество</Typography>
                            <Button variant='contained' sx={{maxWidth: '275px', display:'flex', gap: '10px', padding: '13px 15px'}}> <VkIconButton/>Добавить приложение</Button>
                            <Typography sx={{color: theme.palette.grey2.main}}>
                                Для публикации сниппета на стене, призывающего пройти тест,
                                вставьте в новую запись ссылку на приложение
                            </Typography>
                            <CustomTextField placeholder={''} text={'https://vk.com/app6656524_-XXXXXXXXXXX'}/>
                            <Typography  sx={{fontSize: '14px', color: theme.palette.grey2.main}}>
                                где XXXXXXXXXXX - id вашего сообщества (полный адрес ссылки можно узнать в браузерной строке,
                                открыв приложение в вашей группе
                            </Typography>
                        </Box>

                        <Box sx={{
                            display: 'flex',
                            gap: '20px',
                            flexDirection: 'column'
                        }}>
                            <Typography >2. Откройте квиз в группе (вы должны быть администратором группы)</Typography>
                            <Typography sx={{fontSize: '14px', color: theme.palette.grey2.main}}>
                                Справа снизу нажмите на значок "редактировать"
                                В появившемся окне введите id квиза и нажмите "Привязать". Готово! Квиз привязан к группе
                            </Typography>
                            <Typography sx={{color: theme.palette.grey2.main}}>
                                ID этого квиза
                            </Typography>
                            <CustomTextField placeholder={''} text={'639727c5177be5004f11a0f2'}/>

                        </Box>

                        <Box sx={{display: 'flex', justifyContent: 'end', gap: '10px'}}>
                            <CustomButton
                                variant="outlined"
                                onClick={handleCloseVk}
                                sx={{
                                    border: `1px solid ${theme.palette.brightPurple.main}`,
                                    color: theme.palette.brightPurple.main,
                                    width: "auto",
                                    ml: "auto",
                                    px: "20px",
                                    py: "9px",
                                }}
                            >Отмена</CustomButton>
                            <CustomButton
                                variant="contained"
                                sx={{
                                    backgroundColor: theme.palette.brightPurple.main,
                                    color: "white",
                                    width: "auto",
                                    px: "20px",
                                    py: "9px",
                                }}
                            >Готово</CustomButton>
                        </Box>
                    </Box>
                </Box>
            </Modal>


            <Modal
                open={openDom}
                onClose={handleCloseDom}
                aria-labelledby="modal-modal-title"
                aria-describedby="modal-modal-description"
            >
                <Box sx={{position: 'absolute' as 'absolute',
                    top: '50%',
                    left: '50%',
                    transform: 'translate(-50%, -50%)',
                    maxWidth: '620px',
                    width: '100%',
                    bgcolor: 'background.paper',
                    borderRadius: '12px',

                    boxShadow: 24,
                    p: 0,}}>
                    <Box
                        sx={{display: 'flex',
                            padding: '20px',
                            borderRadius: '12px 12px 0 0',
                            background: theme.palette.background.default,
                        }}
                    >
                        <Typography sx={{color: theme.palette.grey2.main}}>Подключить свой домен</Typography>
                    </Box>
                    <Box sx={{
                        padding: '20px',
                        display: 'flex',
                        flexDirection: 'column',
                        gap: '30px'
                    }}>
                        <Box sx={{
                            display: 'flex',
                            gap: '20px',
                            flexDirection: 'column'
                        }}>
                            <Typography sx={{color: theme.palette.grey2.main}}>
                                Подключите домен к проекту, чтобы создать несколько квизов на одном домене
                            </Typography>
                            <Typography>1. Настройте записи в регистраторе домена</Typography>
                            <Box sx={{display: 'flex'}}>
                                <SelectableButton isSelected={backgroundType === "text"} onClick={() => setBackgroundType("text")}>
                                    Для поддоменов
                                </SelectableButton>
                                <SelectableButton isSelected={backgroundType === "video"} onClick={() => setBackgroundType("video")}>
                                    Для доменов
                                </SelectableButton>
                            </Box>


                            <Typography sx={{color: theme.palette.grey2.main}}>
                                Создайте для нужного поддомена две cname-записи
                            </Typography>
                            <CustomTextField placeholder={''} text={'XXXXXXXXXXX'}/>

                            <TextField
                                id="outlined-multiline-static"
                                multiline
                                rows={2}
                                defaultValue='XXXXXXXXXXX
                                XXXXXXXXXXX'
                                sx={{
                                    "& .MuiInputBase-root": {
                                        backgroundColor: theme.palette.background.default,
                                        borderRadius: "10px",

                                    },
                                }}
                            />
                            <Link
                                component='button'
                                sx={{
                                    fontSize: "16px",
                                    lineHeight: "19px",
                                    color: theme.palette.brightPurple.main,
                                    textDecorationColor: theme.palette.brightPurple.main,
                                    textAlign: 'left',
                                    maxWidth: '372px'
                                }}>
                                Как подключить свой домен/поддомен к квизу?
                                Ошибки при подключении домена
                            </Link>
                        </Box>

                        <Box sx={{
                            display: 'flex',
                            gap: '20px',
                            flexDirection: 'column'
                        }}>
                            <Typography >2. Укажите домен и сохраните квиз</Typography>

                            <FormControl sx={{ m: 1, width: '100%' }} variant="outlined">
                                <OutlinedInput
                                    id="outlined-adornment-password"
                                    type='text'
                                    placeholder='XXXXXXXXXXX'
                                    sx={{
                                        "& .MuiInputBase-root": {
                                            backgroundColor: theme.palette.background.default,
                                            borderRadius: "10px",

                                        },
                                    }}
                                    endAdornment={
                                        <InputAdornment position="end">
                                            <IconButton
                                                // onClick={}
                                                // onMouseDown={}
                                                edge="end"
                                            >
                                                <CopyIcon color={'#ffffff'} bgcolor={theme.palette.brightPurple.main}/>
                                            </IconButton>
                                        </InputAdornment>
                                    }
                                    label="Password"
                                />
                            </FormControl>
                        </Box>

                        <Box sx={{display: 'flex', justifyContent: 'end', gap: '10px'}}>
                            <Typography sx={{fontSize: '14px', color: theme.palette.grey2.main}}>
                                Привязка домена и обновление DNS записей может занять до 48 часов
                            </Typography>
                            <CustomButton
                                variant="outlined"
                                onClick={handleCloseDom}
                                sx={{
                                    border: `1px solid ${theme.palette.brightPurple.main}`,
                                    color: theme.palette.brightPurple.main,
                                    width: "auto",
                                    ml: "auto",
                                    px: "20px",
                                    py: "9px",
                                }}
                            >Отмена</CustomButton>
                            <CustomButton
                                variant="contained"
                                sx={{
                                    backgroundColor: theme.palette.brightPurple.main,
                                    color: "white",
                                    width: "auto",
                                    px: "20px",
                                    py: "9px",
                                }}
                            >Готово</CustomButton>
                        </Box>
                    </Box>
                </Box>
            </Modal>
        </>
    )
}