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

import {
    Box,
    ButtonBase,
    IconButton,
    Modal,
    Typography,
    useTheme
} from "@mui/material";
import { updateAnswer, useQuizViewStore } from "@stores/quizView";

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

import { sendAnswer, sendFile } from "@api/quizRelase";
import Info from "@icons/Info";
import type { UploadFileType } from "@model/questionTypes/file";
import { enqueueSnackbar } from "notistack";
import type { DragEvent } from "react";
import { useState, type ChangeEvent } from "react";
import { useRootContainerSize } from "../../../contexts/RootContainerWidthContext";
import type { QuizQuestionFile } from "../../../model/questionTypes/file";
import { useQuizData } from "@contexts/QuizDataContext";

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 формат — максимум 50мб",
    },
    audio: { title: "Добавить аудиофайл", description: "Принимает аудиофайлы" },
    document: { title: "Добавить документ", description: "Принимает документы" },
} as const;

export const File = ({ currentQuestion }: FileProps) => {
    const theme = useTheme();
    const { answers } = useQuizViewStore();
    const quizId = useQuizData();
    const [statusModal, setStatusModal] = useState<"errorType" | "errorSize" | "picture" | "video" | "audio" | "document" | "">("");

    const answer = answers.find(
        ({ questionId }) => questionId === currentQuestion.id
    )?.answer as string;
    const isMobile = useRootContainerSize() < 500;
    const uploadFile = async ({ target }: ChangeEvent<HTMLInputElement>) => {
        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: quizId,
                        });
                        console.log(data);

                        await sendAnswer({
                            questionId: currentQuestion.id,
                            body: `https://storage.yandexcloud.net/squizanswer/${quizId}/${currentQuestion.id}/${data.data.fileIDMap[currentQuestion.id]}`,
                            qid: quizId,
                        });

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

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

                } else {

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

                setStatusModal("errorSize");
            }

        }
    };

    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] && (
                        <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, "", 0);
                                    }}
                                >
                                    <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>
        </>
    );

};