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

import {
  Box,
  Typography,
  ButtonBase,
  useTheme,
  IconButton,
} from "@mui/material";
import { useQuizViewStore, updateAnswer } from "@root/quizView";
import { UPLOAD_FILE_TYPES_MAP } from "@ui_kit/QuizPreview/QuizPreviewQuestionTypes/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";

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 { answers } = useQuizViewStore();
  const answer = answers.find(
    ({ questionId }) => questionId === currentQuestion.content.id
  )?.answer as string;
  const theme = useTheme();
  const uploadFile = ({ target }: ChangeEvent<HTMLInputElement>) => {
    const file = target.files?.[0];

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

  return (
    <Box>
      <Typography variant="h5">{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>Вы загрузили:</Typography>
            <Box
              sx={{
                padding: "5px 5px 5px 16px",
                backgroundColor: theme.palette.brightPurple.main,
                borderRadius: "8px",
                color: "#FFFFFF",
                display: "flex",
                alignItems: "center",
                gap: "15px",
              }}
            >
              <Typography>{answer?.split("|")[0]}</Typography>
              <IconButton
                sx={{ p: 0 }}
                onClick={() => {
                  updateAnswer(currentQuestion.content.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: "120px",
                display: "flex",
                gap: "50px",
                justifyContent: "flex-start",
                alignItems: "center",
                padding: "33px 44px 33px 55px",
                backgroundColor: theme.palette.background.default,
                border: `1px solid ${theme.palette.grey2.main}`,
                borderRadius: "8px",
              }}
            >
              <UploadIcon />
              <Box>
                <Typography
                  sx={{
                    color: theme.palette.grey2.main,
                    fontWeight: 500,
                  }}
                >
                  {
                    UPLOAD_FILE_DESCRIPTIONS_MAP[currentQuestion.content.type]
                      .title
                  }
                </Typography>
                <Typography
                  sx={{
                    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>
  );
};