frontAnswerer/lib/components/ViewPublicationPage/questions/File/index.tsx

import { useState } from "react";
import { Box, Modal, Typography, useTheme } from "@mui/material";

import { UploadFile } from "./UploadFile";
import { UploadedFile } from "./UploadedFile";

import { useRootContainerSize } from "@contexts/RootContainerWidthContext";
import { useQuizViewStore } from "@stores/quizView";

import { ACCEPT_SEND_FILE_TYPES_MAP } from "@/components/ViewPublicationPage/tools/fileUpload";

import type { QuizQuestionFile } from "@model/questionTypes/file";
import { useTranslation } from "react-i18next";

export type ModalWarningType = "errorType" | "errorSize" | "picture" | "video" | "audio" | "document" | null;

type FileProps = {
  currentQuestion: QuizQuestionFile;
};

export const File = ({ currentQuestion }: FileProps) => {
  const theme = useTheme();
  const answers = useQuizViewStore((state) => state.answers);
  const [modalWarningType, setModalWarningType] = useState<ModalWarningType>(null);
  const [isSending, setIsSending] = useState<boolean>(false);
  const isMobile = useRootContainerSize() < 500;

  const answer = answers.find(({ questionId }) => questionId === currentQuestion.id)?.answer as string;

  return (
    <Box>
      <Typography
        variant="h5"
        color={theme.palette.text.primary}
        sx={{ wordBreak: "break-word" }}
      >
        {currentQuestion.title}
      </Typography>
      <Box
        sx={{
          display: "flex",
          flexDirection: "column",
          width: "100%",
          marginTop: "20px",
          maxWidth: answer?.split("|")[0] ? "640px" : "600px",
        }}
      >
        {answer?.split("|")[0] ? (
          <UploadedFile
            currentQuestion={currentQuestion}
            setIsSending={setIsSending}
          />
        ) : (
          <UploadFile
            currentQuestion={currentQuestion}
            setModalWarningType={setModalWarningType}
            isSending={isSending}
            setIsSending={setIsSending}
          />
        )}
        {answer && currentQuestion.content.type === "picture" && (
          <img
            src={answer.split("|")[1]}
            style={{ marginTop: "15px", maxWidth: "300px", maxHeight: "300px" }}
            alt=""
          />
        )}
        {answer && currentQuestion.content.type === "video" && (
          <video
            src={answer.split("|")[1]}
            style={{
              marginTop: "15px",
              maxWidth: "300px",
              maxHeight: "300px",
              objectFit: "cover",
            }}
          />
        )}
      </Box>
      <Modal
        open={modalWarningType !== null}
        onClose={() => setModalWarningType(null)}
      >
        <Box
          sx={{
            position: "absolute",
            top: "50%",
            left: "50%",
            transform: "translate(-50%, -50%)",
            width: isMobile ? 300 : 400,
            bgcolor: "background.paper",
            borderRadius: 3,
            boxShadow: 24,
            p: 4,
          }}
        >
          <CurrentModal status={modalWarningType} />
        </Box>
      </Modal>
    </Box>
  );
};

const CurrentModal = ({ status }: { status: ModalWarningType }) => {
  const { t } = useTranslation();
  switch (status) {
    case null:
      return null;
    case "errorType":
      return <Typography>{t("Incorrect file type selected")}</Typography>;
    case "errorSize":
      return <Typography>{t("File is too big. Maximum size is 50 MB")}</Typography>;

    default:
      return (
        <>
          <Typography>{t("Acceptable file extensions")}:</Typography>
          <Typography>{ACCEPT_SEND_FILE_TYPES_MAP[status].join(" ")}</Typography>
        </>
      );
  }
};