import { useState } from "react";
import { Box, ButtonBase, Typography } from "@mui/material";
import { useParams } from "react-router-dom";
import SelectableButton from "@ui_kit/SelectableButton";
import CustomTextField from "@ui_kit/CustomTextField";
import { useDebouncedCallback } from "use-debounce";
import UploadIcon from "../../assets/icons/UploadIcon";
import UploadBox from "@ui_kit/UploadBox";
import { questionStore, updateQuestionsList } from "@root/questions";
import { UploadVideoModal } from "./UploadVideoModal";

import type { QuizQuestionBase } from "../../model/questionTypes/shared";

type BackgroundType = "text" | "video";

type HelpQuestionsProps = {
  totalIndex: number;
};

export default function HelpQuestions({ totalIndex }: HelpQuestionsProps) {
  const [open, setOpen] = useState(false);
  const [backgroundType, setBackgroundType] = useState<BackgroundType>("text");
  const quizId = Number(useParams().quizId);
  const { listQuestions } = questionStore();
  const question = listQuestions[quizId][totalIndex] as QuizQuestionBase;
  const debounced = useDebouncedCallback((value) => {
    updateQuestionsList(quizId, totalIndex, {
      content: {
        ...question.content,
        hint: { text: value, video: question.content.hint.video },
      },
    });
  }, 1000);

  const videoHC = (url: string) => {
    const clonedContent = { ...question.content };
    clonedContent.hint.video = url;
    updateQuestionsList(quizId, totalIndex, {
      content: {
        ...question.content,
        hint: { video: url, text: question.content.hint.text },
      },
    });
  };

  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 }) => debounced(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={videoHC}
          />
        </Box>
      )}
    </Box>
  );
}