import {
    Box,
    ButtonBase,
    IconButton,
    Modal,
    Skeleton,
    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 [readySend, setReadySend] = useState(true)

    const answer = answers.find(
        ({ questionId }) => questionId === currentQuestion.id
    )?.answer as string;
    const isMobile = useRootContainerSize() < 500;
    const uploadFile = async ({ target }: ChangeEvent<HTMLInputElement>) => {
        if (readySend) {
            setReadySend(false)
            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");
                }

            }
            setReadySend(true)
        }
    };

    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={async () => {
                                        if (answer.length > 0) {
                                            setReadySend(false)
                                            await sendAnswer({
                                                questionId: currentQuestion.id,
                                                body: "",
                                                qid: quizId,
                                            })
                                        }
                                        console.log(answer)
                                        updateAnswer(currentQuestion.id, "", 0);
                                        setReadySend(true)
                                    }}
                                >
                                    <CloseBold />
                                </IconButton>
                            </Box>
                        </Box>
                    )}

                    {!answer?.split("|")[0] && (
                        <Box sx={{
                            display: "flex",
                            alignItems: "center"
                        }}>
                            {

                                readySend ? <>
                                    <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>
                                    

                                </> :
                                    <Skeleton
                                    variant="rounded"
                                        sx={{
                                            width: "100%",
                                            height: "120px",
                                            maxWidth: "560px",
                                        }}
                                    />
                            }
                            <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>
        </>
    );

};