import { ImageAddIcons } from "@icons/ImageAddIcons";
import { VideofileIcon } from "@icons/questionsPage/VideofileIcon";
import { Box, Typography, useMediaQuery, useTheme } from "@mui/material";
import { questionStore, updateQuestionsList } from "@root/questions";
import CustomTextField from "@ui_kit/CustomTextField";
import { useEffect, useState } from "react";
import { useParams } from "react-router-dom";
import { useDebouncedCallback } from "use-debounce";
import ButtonsOptions from "../ButtonsOptions";
import { UploadImageModal } from "../UploadImage/UploadImageModal";
import { UploadVideoModal } from "../UploadVideoModal";
import SwitchPageOptions from "./switchPageOptions";

import type { QuizQuestionPage } from "../../../model/questionTypes/page";

type Props = {
    disableInput?: boolean;
    totalIndex: number;
};

export default function PageOptions({ disableInput, totalIndex }: Props) {
    const [openImageModal, setOpenImageModal] = useState<boolean>(false);
    const [openVideoModal, setOpenVideoModal] = useState<boolean>(false);
    const [switchState, setSwitchState] = useState("setting");
    const quizId = Number(useParams().quizId);
    const { listQuestions } = questionStore();
    const theme = useTheme();
    const isTablet = useMediaQuery(theme.breakpoints.down(980));
    const isFigmaTablet = useMediaQuery(theme.breakpoints.down(990));
    const isMobile = useMediaQuery(theme.breakpoints.down(780));
    const question = listQuestions[quizId][totalIndex] as QuizQuestionPage;
    const debounced = useDebouncedCallback((value) => {
        updateQuestionsList<QuizQuestionPage>(quizId, totalIndex, {
            content: { ...question.content, text: value },
        });
    }, 1000);

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

    return (
        <>
            <Box
                sx={{
                    width: isTablet ? "auto" : "100%",
                    maxWidth: isFigmaTablet ? "549px" : "640px",
                    display: "flex",
                    px: "20px",
                    flexDirection: "column",
                    gap: isMobile ? "25px" : "20px",
                }}
            >
                <Box sx={{ display: disableInput ? "none" : "", mt: isMobile ? "15px" : "0px" }}>
                    <CustomTextField
                        placeholder={"Можно добавить текст"}
                        text={question.content.text}
                        onChange={({ target }) => debounced(target.value)}
                    />
                </Box>

                <Box
                    sx={{
                        mb: "20px",
                        ml: isTablet ? "0px" : "60px",
                        display: "flex",
                        alignItems: "center",
                        gap: "28px",
                        justifyContent: isMobile ? "space-between" : null,
                    }}
                >
                    <Box
                        onClick={() => setOpenImageModal(true)}
                        sx={{
                            cursor: "pointer",
                            display: "flex",
                            alignItems: "center",
                            gap: "20px",
                        }}
                    >
                        {isMobile ? (
                            <Box
                                sx={{
                                    display: "flex",
                                    alignItems: "center",
                                    width: "120px",
                                    position: "relative",
                                }}
                            >
                                <Box
                                    sx={{
                                        width: "100%",
                                        background: "#EEE4FC",
                                        height: "40px",
                                        display: "flex",
                                        alignItems: "center",
                                        justifyContent: "center",
                                        borderTopLeftRadius: "4px",
                                        borderBottomLeftRadius: "4px",
                                    }}
                                >
                                    {question.content.picture ? (
                                        <Box sx={{ display: "flex", width: "40px" }}>
                                            <img
                                                src={question.content.picture}
                                                alt=""
                                                style={{ width: "100%" }}
                                            />
                                        </Box>
                                    ) : (
                                        <ImageAddIcons
                                            style={{
                                                color: "#7E2AEA",
                                                fontSize: "20px",
                                            }}
                                        />
                                    )}
                                </Box>
                                <Box
                                    sx={{
                                        display: "flex",
                                        justifyContent: "center",
                                        alignItems: "center",
                                        width: "20px",
                                        background: "#EEE4FC",
                                        height: "40px",
                                        color: "white",
                                        backgroundColor: "#7E2AEA",
                                        borderTopRightRadius: "4px",
                                        borderBottomRightRadius: "4px",
                                    }}
                                >
                                    +
                                </Box>
                            </Box>
                        ) : (
                            <Box
                                sx={{
                                    width: "60px",
                                    height: "40px",
                                    background: "#EEE4FC",
                                    display: "flex",
                                    justifyContent: "space-between",
                                    alignItems: "center",
                                }}
                            >
                                {question.content.picture ? (
                                    <Box sx={{ display: "flex", width: "40px" }}>
                                        <img
                                            src={question.content.picture}
                                            alt=""
                                            style={{ width: "100%" }}
                                        />
                                    </Box>
                                ) : (
                                    <Box sx={{ display: "flex", alignItems: "center", justifyContent: "center", width: "100%" }}>
                                        <ImageAddIcons fontSize="22px" color="#7E2AEA" />
                                    </Box>
                                )}
                                <span
                                    style={{
                                        display: "flex",
                                        alignItems: "center",
                                        justifyContent: "center",
                                        background: "#7E2AEA",
                                        height: "100%",
                                        width: "25px",
                                        color: "white",
                                        fontSize: "15px",
                                    }}
                                >
                                    +
                                </span>
                            </Box>
                        )}

                        <Typography
                            sx={{
                                display: isMobile ? "none" : "block",
                                fontWeight: 400,
                                fontSize: "16px",
                                lineHeight: "18.96px",
                                color: theme.palette.grey2.main,
                            }}
                        >
                            Изображение
                        </Typography>
                    </Box>
                    <UploadImageModal
                        open={openImageModal}
                        onClose={() => setOpenImageModal(false)}
                        imgHC={(fileList) => {
                            if (fileList?.length) {
                                updateQuestionsList<QuizQuestionPage>(quizId, totalIndex, {
                                    content: {
                                        ...question.content,
                                        picture: URL.createObjectURL(fileList[0]),
                                    },
                                });
                            }
                        }}
                    // onClick={() => setOpenVideoModal(true)}
                    />
                    <Typography> или</Typography>
                    <Box
                        sx={{
                            cursor: "pointer",
                            display: "flex",
                            alignItems: "center",
                            gap: "10px",
                        }}
                    >
                        {isMobile ? (
                            <Box
                                sx={{
                                    display: "flex",
                                    alignItems: "center",
                                    width: "120px",
                                    position: "relative",
                                }}
                            >
                                <Box
                                    sx={{
                                        width: "100%",
                                        background: "#EEE4FC",
                                        height: "40px",
                                        display: "flex",
                                        alignItems: "center",
                                        justifyContent: "center",
                                        borderTopLeftRadius: "4px",
                                        borderBottomLeftRadius: "4px",
                                    }}
                                >
                                    <VideofileIcon
                                        style={{
                                            color: "#7E2AEA",
                                            fontSize: "20px",
                                        }}
                                    />
                                </Box>
                                <Box
                                    sx={{
                                        display: "flex",
                                        justifyContent: "center",
                                        alignItems: "center",
                                        width: "20px",
                                        background: "#EEE4FC",
                                        height: "40px",
                                        color: "white",
                                        backgroundColor: "#7E2AEA",
                                        borderTopRightRadius: "4px",
                                        borderBottomRightRadius: "4px",
                                    }}
                                >
                                    +
                                </Box>
                            </Box>
                        ) : (
                            <Box
                                sx={{
                                    width: "60px",
                                    height: "40px",
                                    background: "#EEE4FC",
                                    display: "flex",
                                    justifyContent: "space-between",
                                }}
                            >
                                <Box sx={{ display: "flex", alignItems: "center", justifyContent: "center", width: "100%" }}>
                                    <VideofileIcon fontSize="22px" color="#7E2AEA" />
                                </Box>
                                <span
                                    style={{
                                        display: "flex",
                                        alignItems: "center",
                                        justifyContent: "center",
                                        background: "#7E2AEA",
                                        height: "100%",
                                        width: "25px",
                                        color: "white",
                                        fontSize: "15px",
                                    }}
                                >
                                    +
                                </span>
                            </Box>
                        )}

                        <Typography
                            sx={{
                                display: isMobile ? "none" : "block",
                                fontWeight: 400,
                                fontSize: "16px",
                                lineHeight: "18.96px",
                                color: theme.palette.grey2.main,
                            }}
                        >
                            Видео
                        </Typography>
                    </Box>
                    <UploadVideoModal
                        open={openVideoModal}
                        onClose={() => setOpenVideoModal(false)}
                        video={question.content.video}
                        onUpload={(url) => {
                            updateQuestionsList<QuizQuestionPage>(quizId, totalIndex, {
                                content: { ...question.content, video: url },
                            });
                        }}
                    />
                </Box>
            </Box>
            <ButtonsOptions switchState={switchState} SSHC={SSHC} totalIndex={totalIndex} />
            <SwitchPageOptions switchState={switchState} totalIndex={totalIndex} />
        </>
    );
}