frontPanel/src/pages/Questions/answerOptions/helpAnswerOptions.tsx

import {Box, Button, ButtonBase, Modal, Typography, useTheme} from "@mui/material";
import * as React from 'react';
import SelectableButton from "../../../components/CreateQuiz/SelectableButton";
import CustomTextField from "@ui_kit/CustomTextField";
import {useState} from "react";
import UploadIcon from "../../../components/icons/UploadIcon";
import UploadBox from "../../../components/CreateQuiz/UploadBox";
import MiniButtonSetting from "@ui_kit/MiniButtonSetting";
import CustomButton from "../../../components/CustomButton";

type BackgroundType = "text" | "video";
type BackgroundTypeModal = "linkVideo" | "ownVideo"

export default function HelpAnswerOptions() {
    const [open, setOpen] = React.useState(false);
    const handleOpen = () => setOpen(true);
    const handleClose = () => setOpen(false);
    const [backgroundType, setBackgroundType] = useState<BackgroundType>("text");
    const [backgroundTypeModal, setBackgroundTypeModal] = useState<BackgroundTypeModal>("linkVideo");
    const theme = useTheme()

    const videoHC = (videoInp:any) => {
        const [file] = videoInp.files
        setVideo(URL.createObjectURL(file))
        handleClose()
    }
    const [video, setVideo] = React.useState("");
    return (
        <Box sx={{padding: '20px', display: 'flex', flexDirection: 'column', gap: '20px'}}>
            <Typography>Подсказка консультанта</Typography>
            <Box sx={{
                display: "flex",
                gap: "10px",
            }}>
                <SelectableButton isSelected={backgroundType === "text"} onClick={() => setBackgroundType("text")}>
                    Текст
                </SelectableButton>
                <SelectableButton isSelected={backgroundType === "video"} onClick={() => setBackgroundType("video")}>
                    Видео
                </SelectableButton>
            </Box>
            {backgroundType === "text" ?
                <>
                    <CustomTextField placeholder={"Текст консультанта"} text={""}/>
                </>
                :
                <Box>
                    <Typography sx={{paddingBottom: '15px'}}>Загрузите видео</Typography>
                    <ButtonBase onClick={handleOpen} sx={{justifyContent: 'flex-start'}} >
                        {video ?
                            <video src={video} width="400" controls/>
                                :
                            <>
                        <UploadBox
                            icon={<UploadIcon />}
                            sx={{
                                height: "48px",
                                width: "48px",
                            }}
                        />
                            </>
                        }
                    </ButtonBase>
                    <Modal
                        open={open}
                        onClose={handleClose}
                        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: '690px',
                            bgcolor: 'background.paper',
                            borderRadius: '12px',

                            boxShadow: 24,
                            p: 0,}}>
                            <Box
                                sx={{display: 'flex',
                                    padding: '20px',
                                    background: theme.palette.background.default,
                                }}
                            >
                                <Typography>Видео можно вставить с любого хостинга:
                                    YouTube, Vimeo или загрузить собственное</Typography>
                                <CustomButton
                                    variant="contained"
                                    sx={{
                                        backgroundColor: theme.palette.brightPurple.main,
                                        color: "white",
                                        width: "auto",
                                        px: "20px",
                                        py: "9px",
                                    }}
                                >Готово</CustomButton>
                            </Box>
                            <Box sx={{padding: '20px', gap: '10px', display: 'flex'}}>
                                <SelectableButton isSelected={backgroundTypeModal === "linkVideo"} onClick={() => setBackgroundTypeModal("linkVideo")}>
                                    Ссылка на видео
                                </SelectableButton>
                                <SelectableButton isSelected={backgroundTypeModal === "ownVideo"} onClick={() => setBackgroundTypeModal("ownVideo")}>
                                    Загрузить свое
                                </SelectableButton>
                            </Box>
                            {backgroundTypeModal === "linkVideo" ?
                                <Box sx={{padding: '20px'}}>
                                    <Typography sx={{paddingBottom: '15px'}}>Ссылка на видео</Typography>
                                    <CustomTextField placeholder={"http://example.com"} text={""}/>
                                </Box>
                                :
                                <Box sx={{padding: '20px'}}>
                                    <Typography sx={{paddingBottom: '15px'}}>Загрузите видео</Typography>
                                    <ButtonBase component="label" sx={{justifyContent: 'flex-start'}} >
                                        <input onChange={event => videoHC(event.target) } hidden accept="video/*" multiple type="file" />
                                        <Box
                                            sx={{
                                                width: '580px',
                                                padding: '33px',
                                                display: "flex",
                                                justifyContent: "space-between",
                                                alignItems: "center",
                                                backgroundColor: theme.palette.background.default,
                                                border: `1px solid ${theme.palette.grey2.main}`,
                                                borderRadius: "8px",
                                            }}

                                        >
                                            <UploadIcon />
                                            <Box>
                                                <Typography>Добавить видео</Typography>
                                                <Typography>Принимает .mp4 и .mov формат — максимум 100мб</Typography>
                                            </Box>
                                        </Box>
                                    </ButtonBase>
                                </Box>
                            }
                        </Box>
                    </Modal>
                </Box>
            }
        </Box>
    );
};