import { AnyTypedQuizQuestion } from "@model/questionTypes/shared";
import { Box, ButtonBase, Typography } from "@mui/material";
import { updateQuestion } from "@root/questions/actions";
import CustomTextField from "@ui_kit/CustomTextField";
import SelectableButton from "@ui_kit/SelectableButton";
import UploadBox from "@ui_kit/UploadBox";
import { useState } from "react";
import { useDebouncedCallback } from "use-debounce";
import UploadIcon from "../../assets/icons/UploadIcon";
import { UploadVideoModal } from "./UploadVideoModal";


type BackgroundType = "text" | "video";

type HelpQuestionsProps = {
    question: AnyTypedQuizQuestion;
};

export default function HelpQuestions({ question }: HelpQuestionsProps) {
    const [open, setOpen] = useState(false);
    const [backgroundType, setBackgroundType] = useState<BackgroundType>("text");

    const updateQuestionHint = useDebouncedCallback((value) => {
        updateQuestion(question.id, question => {
            question.content.hint.text = value;
        });
    }, 200);

    return (
        <Box
            sx={{
                padding: "20px",
                display: "flex",
                flexDirection: "column",
                gap: "20px",
            }}
        >
            <Typography sx={{ fontWeight: "500" }}>Подсказка консультанта</Typography>
            <Box
                sx={{
                    display: "flex",
                    gap: "10px",
                }}
            >
                <SelectableButton
                    isSelected={backgroundType === "text"}
                    onClick={() => setBackgroundType("text")}
                    sx={{ maxWidth: "130px" }}
                >
                    Текст
                </SelectableButton>
                <SelectableButton
                    isSelected={backgroundType === "video"}
                    onClick={() => setBackgroundType("video")}
                    sx={{ maxWidth: "130px" }}
                >
                    Видео
                </SelectableButton>
            </Box>
            {backgroundType === "text" ? (
                <>
                    <CustomTextField
                        placeholder={"Текст консультанта"}
                        text={question.content.hint.text}
                        onChange={({ target }) => updateQuestionHint(target.value || " ")}
                    />
                </>
            ) : (
                <Box>
                    <Typography sx={{ paddingBottom: "15px", fontWeight: "500" }}>
                        Загрузите видео
                    </Typography>
                    <ButtonBase
                        onClick={() => setOpen(true)}
                        sx={{ justifyContent: "flex-start" }}
                    >
                        {question.content.hint.video ? (
                            <video src={question.content.hint.video} width="400" controls />
                        ) : (
                            <>
                                <UploadBox
                                    icon={<UploadIcon />}
                                    sx={{
                                        height: "48px",
                                        width: "48px",
                                    }}
                                />
                            </>
                        )}
                    </ButtonBase>
                    <UploadVideoModal
                        open={open}
                        onClose={() => setOpen(false)}
                        video={question.content.hint.video}
                        onUpload={url => updateQuestion(question.id, question => {
                            question.content.hint.video = url;
                        })}
                    />
                </Box>
            )}
        </Box>
    );
}