import {
    Box,
    FormControl,
    MenuItem,
    Select,
    SelectChangeEvent,
    Tooltip,
    Typography,
    useMediaQuery,
    useTheme,
} from "@mui/material";
import { updateQuestion } from "@root/questions/actions";
import { useEffect, useState } from "react";
import ArrowDown from "../../../assets/icons/ArrowDownIcon";
import InfoIcon from "../../../assets/icons/InfoIcon";
import type {
    QuizQuestionFile,
    UploadFileType,
} from "../../../model/questionTypes/file";
import ButtonsOptions from "../ButtonsOptions";
import SwitchUpload from "./switchUpload";


type DesignItem = {
    name: string;
    value: UploadFileType;
};

const DESIGN_TYPES: DesignItem[] = [
    { name: "Все типы файлов", value: "all" },
    { name: "Изображения", value: "picture" },
    { name: "Видео", value: "video" },
    { name: "Аудио", value: "audio" },
    { name: "Документ", value: "document" },
];

interface Props {
    question: QuizQuestionFile;
}

export default function UploadFile({ question }: Props) {
    const [switchState, setSwitchState] = useState("setting");
    const theme = useTheme();
    const isTablet = useMediaQuery(theme.breakpoints.down(980));
    const isFigmaTablet = useMediaQuery(theme.breakpoints.down(990));
    const isMobile = useMediaQuery(theme.breakpoints.down(790));

    const SSHC = (data: string) => {
        setSwitchState(data);
    };

    const handleChange = ({ target }: SelectChangeEvent) => {
        updateQuestion(question.id, question => {
            if (question.type !== "file") return;

            question.content.type = target.value as UploadFileType;
        });
    };

    useEffect(() => {
        const isTypeSetted = DESIGN_TYPES.find(
            ({ value }) => value === question.content.type
        );

        if (!isTypeSetted) {
            updateQuestion(question.id, question => {
                if (question.type !== "file") return;

                question.content.type = DESIGN_TYPES[0].value;
            });
        }
    }, []);

    return (
        <>
            <Box
                sx={{
                    width: isTablet ? "auto" : "100%",
                    maxWidth: "680px",
                    display: "flex",
                    px: "20px",
                    flexDirection: "column",
                }}
            >
                <Box sx={{ gap: "10px", display: "flex", mt: isMobile ? "15px" : "0px" }}>
                    <FormControl
                        fullWidth
                        size="small"
                        sx={{
                            width: "100%",
                            minWidth: "200px",
                            height: "48px",
                            maxWidth: isFigmaTablet ? "551px" : "640px",
                        }}
                    >
                        <Select
                            id="category-select"
                            variant="outlined"
                            value={question.content.type}
                            displayEmpty
                            onChange={handleChange}
                            sx={{
                                height: "48px",
                                borderRadius: "8px",
                                "& .MuiOutlinedInput-notchedOutline": {
                                    border: `1px solid ${theme.palette.brightPurple.main} !important`,
                                },
                            }}
                            MenuProps={{
                                PaperProps: {
                                    sx: {
                                        mt: "8px",
                                        p: "4px",
                                        borderRadius: "8px",
                                        border: "1px solid #EEE4FC",
                                        boxShadow: "0px 8px 24px rgba(210, 208, 225, 0.4)",
                                    },
                                },
                                MenuListProps: {
                                    sx: {
                                        py: 0,
                                        display: "flex",
                                        flexDirection: "column",
                                        gap: "8px",
                                        "& .Mui-selected": {
                                            backgroundColor: theme.palette.background.default,
                                            color: theme.palette.brightPurple.main,
                                        },
                                    },
                                },
                            }}
                            inputProps={{
                                sx: {
                                    height: "48px",
                                    color: theme.palette.brightPurple.main,
                                    display: "flex",
                                    alignItems: "center",
                                    px: "9px",
                                    gap: "20px",
                                },
                            }}
                            IconComponent={(props) => <ArrowDown {...props} />}
                        >
                            {DESIGN_TYPES.map(({ name, value }) => (
                                <MenuItem
                                    key={value}
                                    value={value}
                                    sx={{
                                        display: "flex",
                                        alignItems: "center",
                                        gap: "20px",
                                        p: "4px",
                                        borderRadius: "5px",
                                        color: theme.palette.grey2.main,
                                    }}
                                >
                                    {name}
                                </MenuItem>
                            ))}
                        </Select>
                    </FormControl>
                </Box>
                <Box
                    sx={{
                        display: "flex",
                        alignItems: "end",
                        marginBottom: "20px",
                        marginTop: "15px",
                        gap: "9px"
                    }}
                >
                    <Typography
                        sx={{
                            fontWeight: 400,
                            fontSize: "16px",
                            lineHeight: "18.96px",
                            color: theme.palette.grey2.main,
                        }}
                    >
                        Пользователь может загрузить любой собственный файл
                    </Typography>
                    <Tooltip
                        title="Можно загрузить файл в желаемом формате."
                        placement="top"
                    >
                        <Box>
                            <InfoIcon />
                        </Box>
                    </Tooltip>
                </Box>
            </Box>
            <ButtonsOptions
                switchState={switchState}
                SSHC={SSHC}
                question={question}
            />
            <SwitchUpload switchState={switchState} question={question} />
        </>
    );
}
