frontPanel/src/pages/InstallQuiz/ButtonSocial.tsx

import {
    Box,
    Button, FormControl,
    IconButton,
    InputAdornment, Link,
    Modal,
    OutlinedInput,
    TextField,
    Typography,
    useTheme
} from "@mui/material";
import BrowserIcon from "../../assets/icons/BrowserIcon";
import TiktokIcon from "../../assets/icons/tiktokIcon";
import TelegramIcon from "../../assets/icons/telegramIcon";
import QRIcon from "../../assets/icons/qrIcon";
import React from "react";
import CustomTextField from "@ui_kit/CustomTextField";
import UploadBox from "@ui_kit/UploadBox";
import UploadIcon from "../../assets/icons/UploadIcon";
import CopyIcon from "../../assets/icons/CopyIcon";
import Qr from "../../assets/Qr.png"


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

    const [openGraph, setOpenGraph] = React.useState(false);
    const handleOpenGraph = () => setOpenGraph(true);
    const handleCloseGraph = () => setOpenGraph(false);

    const [openTiktok, setOpenTiktok] = React.useState(false);
    const handleOpenTiktok = () => setOpenTiktok(true);
    const handleCloseTiktok = () => setOpenTiktok(false);

    const [openQr, setOpenQr] = React.useState(false);
    const handleOpenQr = () => setOpenQr(true);
    const handleCloseQr = () => setOpenQr(false);


    return(
        <>
            <Box>
                <IconButton onClick={handleOpenGraph}><BrowserIcon/></IconButton>
                <IconButton onClick={handleOpenTiktok}><TiktokIcon/></IconButton>
                <IconButton><TelegramIcon/></IconButton>
                <IconButton onClick={handleOpenQr}><QRIcon/></IconButton>
            </Box>

            {/*модалка Graph*/}
            <Modal
                open={openGraph}
                onClose={handleCloseGraph}
                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}}>Open Graph</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>
                            <CustomTextField placeholder={'Quiz title'} text={''}/>
                        </Box>

                        <Box sx={{
                            display: 'flex',
                            gap: '20px',
                            flexDirection: 'column'
                        }}>
                            <Typography sx={{color: theme.palette.grey2.main}}>
                                Описание
                            </Typography>
                            <TextField
                                id="outlined-multiline-static"
                                multiline
                                rows={2}
                                placeholder='Описание'
                                sx={{
                                    "& .MuiInputBase-root": {
                                        backgroundColor: theme.palette.background.default,
                                        borderRadius: "10px",

                                    },
                                }}
                            />
                        </Box>
                        <Box sx={{
                            display: 'flex',
                            gap: '20px',
                            flexDirection: 'column'
                        }}>
                            <Typography sx={{color: theme.palette.grey2.main}}>
                                Изображение
                            </Typography>
                            <UploadBox sx ={{maxWidth: "325px"}} icon={<UploadIcon />} text="5 MB максимум" />
                        </Box>
                        <Box sx={{display: 'flex', justifyContent: 'end', gap: '10px'}}>
                            <Button
                                variant="outlined"
                                onClick={handleCloseGraph}
                            >Отмена</Button>
                            <Button
                                variant="contained"
                            >Готово</Button>
                        </Box>
                    </Box>
                </Box>
            </Modal>

            {/*модалка тиктока*/}
            <Modal
                open={openTiktok}
                onClose={handleCloseTiktok}
                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}}>Добавить квиз в Tiktok</Typography>
                    </Box>
                    <Box sx={{
                        padding: '20px',
                        display: 'flex',
                        flexDirection: 'column',
                        gap: '30px'
                    }}>
                        <Box sx={{
                            display: 'flex',
                            gap: '20px',
                            flexDirection: 'column'
                        }}>
                            <Typography>1. Скопируйте ссылку на квиз</Typography>

                            <FormControl sx={{ m: 1, width: '100%' }} variant="outlined">
                                <OutlinedInput
                                    id="outlined-adornment-password"
                                    type='text'
                                    placeholder='https://727c5177be5004f11a0f2'
                                    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',
                            gap: '20px',
                            flexDirection: 'column'
                        }}>
                            <Typography >2. Зайдите в аккаунт Tiktok</Typography>
                            <Typography sx={{color: theme.palette.grey2.main}}>
                                Кликните по кнопке “Изменить профиль”. В поле Веб-сайт вставьте скопированную ссылку на квиз.
                                Готово! Квиз вставлен в аккаунт Tiktok.
                            </Typography>
                            <Link
                                component='button'
                                sx={{
                                    fontSize: "16px",
                                    lineHeight: "19px",
                                    color: theme.palette.brightPurple.main,
                                    textDecorationColor: theme.palette.brightPurple.main,
                                    textAlign: 'left',
                                }}>
                               Если всё ещё не понятно, более подробная инструкция тут
                            </Link>
                        </Box>

                        <Box sx={{display: 'flex', justifyContent: 'end', gap: '10px'}}>
                            <Button
                                variant="outlined"
                                onClick={handleCloseTiktok}
                            >Отмена</Button>
                            <Button
                                variant="contained"
                            >Готово</Button>
                        </Box>
                    </Box>
                </Box>
            </Modal>

            {/*модалка QR*/}
            <Modal
                open={openQr}
                onClose={handleCloseQr}
                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}}>QR-код для перехода в квиз</Typography>
                    </Box>
                    <Box sx={{
                        padding: '20px',
                        display: 'flex',
                        flexDirection: 'column',
                        gap: '30px'
                    }}>
                        <Box sx={{
                            display: 'flex',
                            gap: '20px',
                            justifyContent: 'center',
                            alignItems: 'center',
                            flexDirection: 'column'
                        }}>
                            <Typography sx={{color: theme.palette.grey2.main}}>
                                Можно показывать в презентации на вебинарах или распечатать для офлайн мероприятий
                            </Typography>
                            <Box
                                component='img'
                                src={Qr}
                                width='220px'
                            />
                        </Box>

                        <Box sx={{display: 'flex', justifyContent: 'center', gap: '10px'}}>
                            <Button variant='outlined' sx={{color: theme.palette.brightPurple.main, background: '#EEE4FC'}}>Скачать PNG</Button>
                            <Button variant='outlined' sx={{color: theme.palette.brightPurple.main, background: '#EEE4FC'}}>Скачать PNG</Button>
                        </Box>
                    </Box>
                </Box>
            </Modal>

        </>
    )
}