frontAnswerer/src/pages/ViewPublicationPage/questions/File.tsx

import {
    Box,
    Typography,
    ButtonBase,
    useTheme,
    IconButton, useMediaQuery,
} from "@mui/material";
import { useQuizViewStore, updateAnswer } from "@stores/quizView/store";
import { UPLOAD_FILE_TYPES_MAP } from "../tools/File";

import UploadIcon from "@icons/UploadIcon";
import CloseBold from "@icons/CloseBold";

import type { ChangeEvent } from "react";
import type { QuizQuestionFile } from "../../../model/questionTypes/file";
import type { DragEvent } from "react";
import type { UploadFileType } from "@model/questionTypes/file";
import { enqueueSnackbar } from "notistack";
import { sendFile } from "@api/quizRelase";
import { useQuestionsStore } from "@stores/quizData/store"

type FileProps = {
  currentQuestion: QuizQuestionFile;
};

export const UPLOAD_FILE_DESCRIPTIONS_MAP: Record<
  UploadFileType,
  { title: string; description: string }
> = {
  all: { title: "Добавить файл", description: "Принимает любые файлы" },
  picture: {
    title: "Добавить изображение",
    description: "Принимает изображения",
  },
  video: {
    title: "Добавить видео",
    description: "Принимает .mp4 и .mov формат — максимум 100мб",
  },
  audio: { title: "Добавить аудиофайл", description: "Принимает аудиофайлы" },
  document: { title: "Добавить документ", description: "Принимает документы" },
} as const;

export const File = ({ currentQuestion }: FileProps) => {
  const { settings } = useQuestionsStore()
  const { answers } = useQuizViewStore();
  const answer = answers.find(
    ({ questionId }) => questionId === currentQuestion.id
  )?.answer as string;
  const theme = useTheme();
  const isMobile = useMediaQuery(theme.breakpoints.down(500));
  const uploadFile = async ({ target }: ChangeEvent<HTMLInputElement>) => {
    const file = target.files?.[0];
    if (file) {

       try {

         await sendFile({
           questionId: currentQuestion.id,
           body: {
             file: `${file.name}|${URL.createObjectURL(file)}`,
             name: file.name
           },
           //@ts-ignore
           qid: settings.qid
         })

        updateAnswer(
          currentQuestion.id,
          `${file.name}|${URL.createObjectURL(file)}`
        );

       } catch (e) {
         enqueueSnackbar("ответ не был засчитан")
       }

    }
  };

  return (
    <Box>
      <Typography variant="h5" color={theme.palette.text.primary}>{currentQuestion.title}</Typography>
      <Box
        sx={{
          display: "flex",
          flexDirection: "column",
          width: "100%",
          marginTop: "20px",
          maxWidth: answer?.split("|")[0] ? "640px" : "550px",
        }}
      >
        {answer?.split("|")[0] && (
          <Box sx={{ display: "flex", alignItems: "center", gap: "15px" }}>
            <Typography color={theme.palette.text.primary}>Вы загрузили:</Typography>
            <Box
              sx={{
                padding: "5px 5px 5px 16px",
                backgroundColor: theme.palette.primary.main,
                borderRadius: "8px",
                color: "#FFFFFF",
                display: "flex",
                alignItems: "center",
                overflow: "hidden",
                gap: "15px",
              }}
            >
              <Typography
                  sx={{
                      whiteSpace: "nowrap",
                      textOverflow: "ellipsis",
                      overflow: "hidden",
                  }}
              >
                  {answer?.split("|")[0]}</Typography>
              <IconButton
                sx={{ p: 0 }}
                onClick={() => {
                  updateAnswer(currentQuestion.id, "");
                }}
              >
                <CloseBold />
              </IconButton>
            </Box>
          </Box>
        )}

        {!answer?.split("|")[0] && (
          <ButtonBase component="label" sx={{ justifyContent: "flex-start" }}>
            <input
              onChange={uploadFile}
              hidden
              accept={UPLOAD_FILE_TYPES_MAP[currentQuestion.content.type]}
              multiple
              type="file"
            />
            <Box
              onDragOver={(event: DragEvent<HTMLDivElement>) =>
                event.preventDefault()
              }
              sx={{
                width: "100%",
                height: isMobile ? undefined : "120px",
                display: "flex",
                gap: "50px",
                justifyContent: "flex-start",
                alignItems: "center",
                padding: "33px 44px 33px 55px",
                backgroundColor: theme.palette.background.default,
                border: `1px solid #9A9AAF`,
                // border: `1px solid ${theme.palette.grey2.main}`,
                borderRadius: "8px",
              }}
            >
              <UploadIcon />
              <Box>
                <Typography
                  sx={{
                    color: "#9A9AAF",
                    // color: theme.palette.grey2.main,
                    fontWeight: 500,
                  }}
                >
                  {
                    UPLOAD_FILE_DESCRIPTIONS_MAP[currentQuestion.content.type]
                      .title
                  }
                </Typography>
                <Typography
                  sx={{
                    color: "#9A9AAF",
                    // color: theme.palette.grey2.main,
                    fontSize: "16px",
                    lineHeight: "19px",
                  }}
                >
                  {
                    UPLOAD_FILE_DESCRIPTIONS_MAP[currentQuestion.content.type]
                      .description
                  }
                </Typography>
              </Box>
            </Box>
          </ButtonBase>
        )}
        {answer && currentQuestion.content.type === "picture" && (
          <img
            src={answer.split("|")[1]}
            alt=""
            style={{
              marginTop: "15px",
              maxWidth: "300px",
              maxHeight: "300px",
            }}
          />
        )}
        {answer && currentQuestion.content.type === "video" && (
          <video
            src={answer.split("|")[1]}
            style={{
              marginTop: "15px",
              maxWidth: "300px",
              maxHeight: "300px",
              objectFit: "cover",
            }}
          />
        )}
      </Box>
    </Box>
  );

};