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 { useState } from "react";
import UploadIcon from "../../assets/icons/UploadIcon";
import UploadBox from "@ui_kit/UploadBox";
import { questionStore, updateQuestionsList } from "@root/questions";
import { UploadVideoModal } from "./UploadVideoModal";

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 videoHC = (url: string) => {
    const clonContent = listQuestions[quizId][totalIndex].content;
    clonContent.hint.video = url;
    updateQuestionsList(quizId, totalIndex, { content: clonContent });
  };

  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={listQuestions[quizId][totalIndex].content.hint.text}
            onChange={({ target }) => {
              let clonContent = listQuestions[quizId][totalIndex].content;
              clonContent.hint.text = target.value;
              updateQuestionsList(quizId, totalIndex, { content: clonContent });
            }}
          />
        </>
      ) : (
        <Box>
          <Typography sx={{ paddingBottom: "15px", fontWeight: "500" }}>
            Загрузите видео
          </Typography>
          <ButtonBase
            onClick={() => setOpen(true)}
            sx={{ justifyContent: "flex-start" }}
          >
            {listQuestions[quizId][totalIndex].content.hint.video ? (
              <video
                src={listQuestions[quizId][totalIndex].content.hint.video}
                width="400"
                controls
              />
            ) : (
              <>
                <UploadBox
                  icon={<UploadIcon />}
                  sx={{
                    height: "48px",
                    width: "48px",
                  }}
                />
              </>
            )}
          </ButtonBase>
          <UploadVideoModal
            open={open}
            onClose={() => setOpen(false)}
            video={listQuestions[quizId][totalIndex].content.hint.video}
            onUpload={videoHC}
          />
        </Box>
      )}
    </Box>
  );
}