frontPanel/src/pages/Questions/PageOptions/PageOptions.tsx

import { VideofileIcon } from "@icons/questionsPage/VideofileIcon";
import { Box, Typography, useMediaQuery, useTheme } from "@mui/material";
import { questionStore, setPageQuestionOriginalPicture, setPageQuestionPicture, updateQuestionsList } from "@root/questions";
import CustomTextField from "@ui_kit/CustomTextField";
import { 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 { openCropModal } from "@root/cropModal";
import AddOrEditImageButton from "@ui_kit/AddOrEditImageButton";
import { CropModal } from "@ui_kit/Modal/CropModal";
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);
    };

    function handleImageUpload(fileList: FileList | null) {
        if (!fileList?.length) return;

        const url = URL.createObjectURL(fileList[0]);

        setPageQuestionPicture(quizId, totalIndex, url);
        setPageQuestionOriginalPicture(quizId, totalIndex, url);
        setOpenImageModal(false);
        openCropModal(url, url);
    }

    function handleCropModalSaveClick(url: string) {
        setPageQuestionPicture(quizId, totalIndex, url);
    }

    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
                        sx={{
                            cursor: "pointer",
                            display: "flex",
                            alignItems: "center",
                            gap: "20px",
                        }}
                    >
                        <AddOrEditImageButton
                            imageSrc={question.content.picture}
                            onImageClick={() => {
                                if (question.content.picture) {
                                    return openCropModal(
                                        question.content.picture,
                                        question.content.originalPicture
                                    );
                                }

                                setOpenImageModal(true);
                            }}
                            onPlusClick={() => {
                                setOpenImageModal(true);
                            }}
                        />

                        <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={handleImageUpload}
                    />
                    <CropModal onSaveImageClick={handleCropModalSaveClick} />
                    <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} />
        </>
    );
}