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 { memo, useState } from "react";
import UploadIcon from "../../assets/icons/UploadIcon";
import { UploadVideoModal } from "./UploadVideoModal";

type BackgroundType = "text" | "video";

type HelpQuestionsProps = {
  questionId: string;
  hintVideo: string;
  hintText: string;
};

const HelpQuestions = memo<HelpQuestionsProps>(function ({
  questionId,
  hintVideo,
  hintText,
}) {
  const [open, setOpen] = useState(false);
  const [backgroundType, setBackgroundType] = useState<BackgroundType>("text");

  const updateQuestionHint = (value: string) => {
    updateQuestion(questionId, (question) => {
      question.content.hint.text = value;
    });
  };

  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={"Текст консультанта"}
            value={hintText}
            onChange={({ target }) => updateQuestionHint(target.value || " ")}
            maxLength={100}
          />
        </>
      ) : (
        <Box>
          <Typography sx={{ paddingBottom: "15px", fontWeight: "500" }}>
            Загрузите видео
          </Typography>
          <ButtonBase
            onClick={() => setOpen(true)}
            sx={{ justifyContent: "flex-start" }}
          >
            {hintVideo ? (
              <video src={hintVideo} width="400" controls />
            ) : (
              <>
                <UploadBox
                  icon={<UploadIcon />}
                  sx={{
                    height: "48px",
                    width: "48px",
                  }}
                />
              </>
            )}
          </ButtonBase>
          <UploadVideoModal
            open={open}
            onClose={() => setOpen(false)}
            video={hintVideo}
            onUpload={(url) =>
              updateQuestion(questionId, (question) => {
                question.content.hint.video = url;
              })
            }
          />
        </Box>
      )}
    </Box>
  );
});

HelpQuestions.displayName = "HelpQuestions";

export default HelpQuestions;