frontPanel/src/pages/Questions/DataOptions/settingData.tsx

import { Box, Tooltip, Typography, useMediaQuery, useTheme } from "@mui/material";
import { setQuestionInnerName, updateQuestionWithFnOptimistic } 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 { QuizQuestionDate } from "../../../model/questionTypes/date";


type SettingsDataProps = {
    question: QuizQuestionDate;
};

export default function SettingsData({ question }: SettingsDataProps) {
    const theme = useTheme();
    const isWrappColumn = useMediaQuery(theme.breakpoints.down(980));
    const isMobile = useMediaQuery(theme.breakpoints.down(790));
    const isFigmaTablte = useMediaQuery(theme.breakpoints.down(990));

    const setInnerName = useDebouncedCallback((value) => {
        setQuestionInnerName(question.id, value);
    }, 1000);

    return (
        <Box
            sx={{
                display: "flex",
                justifyContent: "space-between",
                flexDirection: isWrappColumn ? "column" : null,
            }}
        >
            <Box
                sx={{
                    pt: "20px",
                    pb: isMobile ? "25px" : "20px",
                    pl: "20px",
                    display: "flex",
                    flexDirection: "column",
                    gap: "14px",
                    width: "100%",
                }}
            >
                <Typography sx={{ height: isMobile ? "18px" : "auto", fontWeight: "500", fontSize: "18px", color: " #4D4D4D" }}>
                    Настройки календаря
                </Typography>
                <CustomCheckbox
                    sx={{ display: "block", mr: isMobile ? "0px" : "16px" }}
                    label={"Выбор диапазона дат"}
                    checked={question.content.dateRange}
                    handleChange={({ target }) => {
                        updateQuestionWithFnOptimistic(question.id, question => {
                            if (question.type !== "date") return;

                            question.content.dateRange = target.checked;
                        });
                    }}
                />
                <CustomCheckbox
                    sx={{ display: "block", mr: isMobile ? "0px" : "16px" }}
                    label={"Выбор времени"}
                    checked={question.content.time}
                    handleChange={({ target }) => {
                        updateQuestionWithFnOptimistic(question.id, question => {
                            if (question.type !== "date") return;

                            question.content.time = target.checked;
                        });
                    }}
                />
            </Box>
            <Box
                sx={{
                    pt: isMobile ? "0px" : "20px",
                    pb: "20px",
                    pl: isFigmaTablte ? (isWrappColumn ? "20px" : "34px") : "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.required}
                    handleChange={({ target }) => {
                        updateQuestionWithFnOptimistic(question.id, question => {
                            question.required = !target.checked;
                        });
                    }}
                />
                <Box
                    sx={{
                        width: isMobile ? "93%" : "auto",
                        display: "flex",
                        alignItems: "center",
                    }}
                >
                    <CustomCheckbox
                        sx={{
                            mr: isMobile ? "0px" : "16px",
                            height: isMobile ? "100%" : "26px",
                            alignItems: isMobile ? "flex-start" : "center",
                        }}
                        label={"Внутреннее название вопроса"}
                        checked={question.content.innerNameCheck}
                        handleChange={({ target }) => {
                            updateQuestionWithFnOptimistic(question.id, question => {
                                question.content.innerNameCheck = target.checked;
                                question.content.innerName = 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 }) => setInnerName(target.value)}
                    />
                )}
            </Box>
        </Box>
    );
}