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";

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 }) => {
  switch (status) {
    case null:
      return null;
    case "errorType":
      return <Typography>Выбран некорректный тип файла</Typography>;
    case "errorSize":
      return (
        <Typography>Файл слишком большой. Максимальный размер 50 МБ</Typography>
      );

    default:
      return (
        <>
          <Typography>Допустимые расширения файлов:</Typography>
          <Typography>
            {ACCEPT_SEND_FILE_TYPES_MAP[status].join(" ")}
          </Typography>
        </>
      );
  }
};