frontPanel/src/pages/Questions/helpQuestions.tsx

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 || " ")}
            maxLength={100}
          />
        </>
      ) : (
        <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>
  );
}