import {Box, Typography, useTheme} from "@mui/material";
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";

type BackgroundType = "text" | "video";

export default function HelpAnswerOptions() {
    const [backgroundType, setBackgroundType] = useState<BackgroundType>("text");
    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={""}/>
                </>
                :
                <>
                    <Typography>Загрузите видео</Typography>
                    <UploadBox
                        icon={<UploadIcon />}
                        sx={{
                            height: "48px",
                            width: "48px",
                        }}
                    />
                </>
            }
        </Box>
    );
};