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

import {
  Box,
  Typography,
  ButtonBase,
  useTheme,
  IconButton, useMediaQuery, Modal,
} 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 { useState, 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 { sendAnswer, sendFile } from "@api/quizRelase";
import { useQuestionsStore } from "@stores/quizData/store"
import Info from "@icons/Info";

type FileProps = {
  currentQuestion: QuizQuestionFile;
};

const CurrentModal = ({ status }: { status: "errorType" | "errorSize" | "picture" | "video" | "audio" | "document" | "" }) => {
  switch (status) {
    case 'errorType':
      return (<>
        <Typography>Выбран некорректный тип файла</Typography>
      </>)
    case 'errorSize':
      return (<>
        <Typography>Файл слишком большой. Максимальный размер 50 МБ</Typography>
      </>)
    default:
      return (<>
        <Typography>Допустимые расширения файлов:</Typography>
        <Typography>{
          //@ts-ignore
          ACCEPT_SEND_FILE_TYPES_MAP[status].join(" ")}</Typography>
      </>)
  }
}

const ACCEPT_SEND_FILE_TYPES_MAP = {
  picture: [
    ".jpeg",
    ".jpg",
    ".png",
    ".ico",
    ".gif",
    ".tiff",
    ".webp",
    ".eps",
    ".svg"
  ],
  video: [
    ".mp4",
    ".mov",
    ".wmv",
    ".avi",
    ".avchd",
    ".flv",
    ".f4v",
    ".swf",
    ".mkv",
    ".webm",
    ".mpeg-2"
  ],
  audio: [
    ".aac",
    ".aiff",
    ".dsd",
    ".flac",
    ".mp3",
    ".mqa",
    ".ogg",
    ".wav",
    ".wma"
  ],
  document: [
    ".doc",
    ".docx",
    ".dotx",
    ".rtf",
    ".odt",
    ".pdf",
    ".txt",
    ".xls",
    ".ppt",
    ".xlsx",
    ".pptx",
    ".pages",
  ],

}


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

export const File = ({ currentQuestion }: FileProps) => {
  const theme = useTheme();
  const { settings } = useQuestionsStore()
  const { answers } = useQuizViewStore();

  const [statusModal, setStatusModal] = useState<"errorType" | "errorSize" | "picture" | "video" | "audio" | "document" | "">("")

  const answer = answers.find(
    ({ questionId }) => questionId === currentQuestion.id
  )?.answer as string;
  const isMobile = useMediaQuery(theme.breakpoints.down(500));
  const uploadFile = async ({ target }: ChangeEvent<HTMLInputElement>) => {
    if (!settings) return;
    
    const file = target.files?.[0];
    if (file) {
      if (file.size <= 52428800) {
        //проверяем на соответствие
        console.log(file.name.toLowerCase())
        if (ACCEPT_SEND_FILE_TYPES_MAP[currentQuestion.content.type].find((ednding => {
          console.log(ednding)
          console.log(file.name.toLowerCase().endsWith(ednding))
          return file.name.toLowerCase().endsWith(ednding)
        }))) {

          //Нужный формат
          console.log(file)
          try {

            const data = await sendFile({
              questionId: currentQuestion.id,
              body: {
                file: file,
                name: file.name
              },
                 qid: settings.qid
            })
            console.log(data)

            await sendAnswer({
              questionId: currentQuestion.id,
              //@ts-ignore
              body: `https://storage.yandexcloud.net/squizanswer/${settings.qid}/${currentQuestion.id}/${data.data.fileIDMap[currentQuestion.id]}`,
              //@ts-ignore
              qid: settings.qid
            })

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

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

        } else {

          //неподходящий формат
          setStatusModal("errorType")
        }
      } else {

        setStatusModal("errorSize")
      }

    }
  };

  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" : "600px",
          }}
        >
          {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] && (
            <Box sx={{
              display: "flex",
              alignItems: "center"
            }}>
              <ButtonBase component="label" sx={{ justifyContent: "flex-start", width: "100%" }}>
                <input
                  onChange={uploadFile}
                  hidden
                  accept={ACCEPT_SEND_FILE_TYPES_MAP[currentQuestion.content.type].join(",")}
                  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>
              <Info sx={{ width: "40px", height: "40px" }} color={theme.palette.primary.main} onClick={() => setStatusModal(currentQuestion.content.type)} />
            </Box>
          )}
          {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>
      <Modal
        open={Boolean(statusModal)}
        onClose={() => setStatusModal("")}
      >
        <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={statusModal} />
        </Box>
      </Modal>
    </>
  );

};