frontPanel/src/ui_kit/MediaSelectionAndDisplay.tsx

import { useState, FC } from "react";
import {
  Box,
  Button,
  ButtonBase,
  Tooltip,
  Typography,
  useTheme,
} 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";
import UploadBox from "@ui_kit/UploadBox";
import UploadIcon from "@icons/UploadIcon";
import InfoIcon from "@icons/InfoIcon";

interface Iprops {
  resultData: AnyTypedQuizQuestion;
}

export const MediaSelectionAndDisplay: FC<Iprops> = ({ resultData }) => {
  const [pictureUploding, setPictureUploading] = useState<boolean>(false);
  const quizQid = useCurrentQuiz()?.qid;
  const theme = useTheme();
  const {
    isCropModalOpen,
    openCropModal,
    closeCropModal,
    imageBlob,
    originalImageUrl,
    setCropModalImageBlob,
  } = useCropModalState();
  const [isImageUploadOpen, openImageUploadModal, closeImageUploadModal] =
    useDisclosure();
  async function handleImageUpload(file: File) {
    setPictureUploading(true);

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

    setPictureUploading(false);
  }

  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}
            uploading={pictureUploding}
            onImageClick={() => {
              if (resultData.content.back) {
                return openCropModal(
                  resultData.content.back,
                  resultData.content.originalBack,
                );
              }

              openImageUploadModal();
            }}
            onPlusClick={() => {
              openImageUploadModal();
            }}
          />
        </Box>
      )}
      {!resultData.content.useImage && (
        <>
          <Box
            sx={{
              display: "flex",
              alignItems: "center",
              gap: "7px",
              mt: "20px",
              mb: "14px",
            }}
          >
            <Typography
              sx={{ fontWeight: 500, color: theme.palette.grey3.main }}
            >
              Добавить видео
            </Typography>
            <Tooltip title="Можно загрузить видео." placement="top">
              <Box>
                <InfoIcon />
              </Box>
            </Tooltip>
          </Box>
          <ButtonBase
            component="label"
            sx={{
              justifyContent: "center",
              height: "48px",
              width: "48px",
              display: "flex",
              alignItems: "center",
              my: "20px",
            }}
          >
            <input
              onChange={(event) => {
                const file = event.target.files?.[0];
                if (file) {
                  uploadQuestionImage(
                    resultData.id,
                    quizQid,
                    file,
                    (question, url) => {
                      question.content.video = url;
                    },
                  );
                }
              }}
              hidden
              accept=".mp4"
              multiple
              type="file"
            />
            <UploadBox
              icon={<UploadIcon />}
              sx={{
                height: "48px",
                width: "48px",
              }}
            />
          </ButtonBase>
          {resultData.content.video ? (
            <video src={resultData.content.video} width="300" controls />
          ) : null}
        </>
      )}
    </Box>
  );
};