frontPanel/src/ui_kit/MediaSelectionAndDisplay.tsx

import { FC } from "react";
import { Box, Button } from "@mui/material";
import CustomTextField from "./CustomTextField";
import { updateQuestion, uploadQuestionImage } from "@root/questions/actions";
import { CropModal, useCropModalState } from "@ui_kit/Modal/CropModal";

import AddOrEditImageButton from "@ui_kit/AddOrEditImageButton";
import { UploadImageModal } from "../pages/Questions/UploadImage/UploadImageModal";
import { useDisclosure } from "../utils/useDisclosure";
import { useCurrentQuiz } from "../stores/quizes/hooks";
import { AnyTypedQuizQuestion } from "@model/questionTypes/shared";

interface Iprops {
  resultData: AnyTypedQuizQuestion;
}

export const MediaSelectionAndDisplay: FC<Iprops> = ({ resultData }) => {
  const quizQid = useCurrentQuiz()?.qid;
  const {
    isCropModalOpen,
    openCropModal,
    closeCropModal,
    imageBlob,
    originalImageUrl,
    setCropModalImageBlob,
  } = useCropModalState();
  const [isImageUploadOpen, openImageUploadModal, closeImageUploadModal] =
    useDisclosure();

  async function handleImageUpload(file: File) {
    const url = await uploadQuestionImage(
      resultData.id,
      quizQid,
      file,
      (question, url) => {
        question.content.back = url;
        question.content.originalBack = url;
      },
    );
    closeImageUploadModal();
    openCropModal(file, url);
  }

  function handleCropModalSaveClick(imageBlob: Blob) {
    uploadQuestionImage(resultData.id, quizQid, imageBlob, (question, url) => {
      question.content.back = url;
    });
  }

  return (
    <Box
      sx={{
        mt: "20px",
        display: "flex",
        gap: "10px",
        flexDirection: "column",
      }}
    >
      <Box
        sx={{
          display: "flex",
        }}
      >
        <Button
          sx={{
            color: resultData.content.useImage ? "#7E2AEA" : "#9A9AAF",
            fontSize: "16px",
            "&:hover": {
              background: "none",
            },
          }}
          variant="text"
          onClick={() =>
            updateQuestion(
              resultData.id,
              (question) => (question.content.useImage = true),
            )
          }
        >
          Изображение
        </Button>
        <Button
          sx={{
            color: resultData.content.useImage ? "#9A9AAF" : "#7E2AEA",
            fontSize: "16px",
            "&:hover": {
              background: "none",
            },
          }}
          variant="text"
          onClick={() =>
            updateQuestion(
              resultData.id,
              (question) => (question.content.useImage = false),
            )
          }
        >
          Видео
        </Button>
      </Box>

      <Box
        sx={{
          display: "flex",
          flexDirection: "column",
        }}
      >
        <UploadImageModal
          isOpen={isImageUploadOpen}
          onClose={closeImageUploadModal}
          handleImageChange={handleImageUpload}
        />
        <CropModal
          isOpen={isCropModalOpen}
          imageBlob={imageBlob}
          originalImageUrl={originalImageUrl}
          setCropModalImageBlob={setCropModalImageBlob}
          onClose={closeCropModal}
          onSaveImageClick={handleCropModalSaveClick}
        />
      </Box>

      {resultData.content.useImage && (
        <Box
          sx={{
            cursor: "pointer",
            display: "flex",
            alignItems: "center",
            gap: "20px",
            mb: "30px",
          }}
        >
          <AddOrEditImageButton
            imageSrc={resultData.content.back}
            onImageClick={() => {
              if (resultData.content.back) {
                return openCropModal(
                  resultData.content.back,
                  resultData.content.originalBack,
                );
              }

              openImageUploadModal();
            }}
            onPlusClick={() => {
              openImageUploadModal();
            }}
          />
        </Box>
      )}
      {!resultData.content.useImage && (
        <Box
          sx={{
            cursor: "pointer",
            display: "flex",
            alignItems: "center",
            gap: "20px",
            mb: "30px",
          }}
        >
          <CustomTextField
            placeholder="URL видео"
            text={resultData.content.video ?? ""}
            onChange={(e) =>
              updateQuestion(resultData.id, (q) => {
                q.content.video = e.target.value;
              })
            }
          />
        </Box>
      )}
    </Box>
  );
};