frontPanel/src/pages/Questions/OptionsAndPicture/SettingOptionsAndPict.tsx

import { Box, Tooltip, Typography, useMediaQuery, useTheme } from "@mui/material";
import { setQuestionInnerName, updateQuestion } from "@root/questions/actions";
import CustomCheckbox from "@ui_kit/CustomCheckbox";
import CustomTextField from "@ui_kit/CustomTextField";
import { useDebouncedCallback } from "use-debounce";
import InfoIcon from "../../../assets/icons/InfoIcon";
import type { QuizQuestionVarImg } from "../../../model/questionTypes/varimg";


type SettingOptionsAndPictProps = {
    question: QuizQuestionVarImg;
};

export default function SettingOptionsAndPict({ question }: SettingOptionsAndPictProps) {
    const theme = useTheme();
    const isWrappColumn = useMediaQuery(theme.breakpoints.down(980));
    const isFigmaTablte = useMediaQuery(theme.breakpoints.down(990));
    const isMobile = useMediaQuery(theme.breakpoints.down(680));

    const setReplText = useDebouncedCallback((replText) => {
        updateQuestion(question.id, question => {
            if (question.type !== "varimg") return;

            question.content.replText = replText;
        });
    }, 200);

    const setDescription = useDebouncedCallback((value) => {
        setQuestionInnerName(question.id, value);
    }, 200);

    return (
        <>
            <Box
                sx={{
                    display: "flex",
                    justifyContent: "space-between",
                    flexDirection: isWrappColumn ? "column" : "none",
                }}
            >
                <Box
                    sx={{
                        pt: isMobile ? "30px" : "20px",
                        pb: isMobile ? "25px" : "20px",
                        pl: "20px",
                        display: "flex",
                        flexDirection: "column",
                        gap: "14px",
                        maxWidth: isFigmaTablte ? "297px" : "360px",
                        width: "100%",
                    }}
                >
                    <Typography
                        sx={{ height: isMobile ? "18px" : "auto", fontWeight: "500", fontSize: "18px", color: " #4D4D4D" }}
                    >
                        Настройки ответов
                    </Typography>
                    <CustomCheckbox
                        sx={{ mr: isMobile ? "0px" : "16px" }}
                        label={'Вариант "свой ответ"'}
                        checked={question.content.own}
                        handleChange={({ target }) => updateQuestion(question.id, question => {
                            if (question.type !== "varimg") return;

                            question.content.own = target.checked;
                        })}
                    />
                    {!isWrappColumn && (
                        <Box sx={{ mt: isMobile ? "11px" : "6px", width: "100%" }}>
                            <Typography
                                sx={{
                                    height: isMobile ? "18px" : "auto",
                                    fontWeight: "500",
                                    fontSize: "18px",
                                    color: " #4D4D4D",
                                    mb: "14px",
                                }}
                            >
                                Текст-заглушка на картинке
                            </Typography>
                            <CustomTextField
                                sx={{
                                    maxWidth: "330px",
                                    width: "100%",
                                    mr: isMobile ? "0px" : "16px",
                                }}
                                placeholder={"Пример текста"}
                                text={question.content.replText}
                                onChange={({ target }) => setReplText(target.value)}
                            />
                        </Box>
                    )}
                </Box>
                <Box
                    sx={{
                        pt: isMobile ? "0px" : "20px",
                        pb: "20px",
                        pl: isFigmaTablte ? (isWrappColumn ? "20px" : "31px") : "20px",
                        pr: isFigmaTablte ? "19px" : "20px",
                        display: "flex",
                        flexDirection: "column",
                        gap: isMobile ? "13px" : "14px",
                        width: isMobile ? "auto" : "100%",
                    }}
                >
                    <Typography
                        sx={{ height: isMobile ? "18px" : "auto", fontWeight: "500", fontSize: "18px", color: " #4D4D4D" }}
                    >
                        Настройки вопросов
                    </Typography>
                    <CustomCheckbox
                        sx={{ mr: isMobile ? "0px" : "16px" }}
                        label={"Необязательный вопрос"}
                        checked={!question.content.required}
                        handleChange={({ target }) => updateQuestion<QuizQuestionVarImg>(question.id, question => {
                            if (question.type !== "varimg") return;

                            question.content.required = !target.checked;
                        })}
                    />
                    {/*<Box sx={{ display: "flex", alignItems: "center" }}>*/}
                    {/*    <CustomCheckbox*/}
                    {/*        sx={{*/}
                    {/*            width: isMobile ? "90%" : "auto",*/}
                    {/*            mr: isMobile ? "0px" : "16px",*/}
                    {/*        }}*/}
                    {/*        label={"Внутреннее название вопроса"}*/}
                    {/*        checked={question.content.innerNameCheck}*/}
                    {/*        handleChange={({ target }) => updateQuestion<QuizQuestionVarImg>(question.id, question => {*/}
                    {/*            question.content.innerNameCheck = target.checked;*/}
                    {/*            question.content.innerName = "";*/}
                    {/*        })}*/}
                    {/*    />*/}
                    {/*    <Tooltip title="Будет отображаться как заголовок вопроса в приходящих заявках." placement="top">*/}
                    {/*        <Box>*/}
                    {/*            <InfoIcon />*/}
                    {/*        </Box>*/}
                    {/*    </Tooltip>*/}
                    {/*</Box>*/}
                    {/*{question.content.innerNameCheck && (*/}
                    {/*    <CustomTextField*/}
                    {/*        placeholder={"Развёрнутое описание вопроса"}*/}
                    {/*        text={question.content.innerName}*/}
                    {/*        onChange={({ target }) => setDescription(target.value)}*/}
                    {/*    />*/}
                    {/*)}*/}
                    {isWrappColumn && (
                        <>
                            <Typography
                                sx={{ height: isMobile ? "18px" : "auto", fontWeight: "500", fontSize: "18px", color: " #4D4D4D" }}
                            >
                                Текст-заглушка на картинке
                            </Typography>
                            <CustomTextField
                                sx={{ maxWidth: "360px", width: "100%" }}
                                placeholder={"Пример текста"}
                                text={question.content.replText}
                                onChange={({ target }) => setReplText(target.value)}
                            />
                        </>
                    )}
                </Box>
            </Box>
        </>
    );
}