frontPanel/src/pages/Questions/UploadFile/settingUpload.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 { QuizQuestionFile } from "../../../model/questionTypes/file";


type SettingsUploadProps = {
    question: QuizQuestionFile;
};

export default function SettingsUpload({ question }: SettingsUploadProps) {
    const theme = useTheme();
    const isMobile = useMediaQuery(theme.breakpoints.down(790));

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

    return (
        <Box
            sx={{
                boxSizing: "border-box",
                pt: isMobile ? "30px" : "20px",
                pb: "20px",
                pl: "20px",
                pr: isMobile ? "20px" : "0px",
                display: "flex",
                flexDirection: "column",
                gap: "14px",
                width: isMobile ? "auto" : "100%",
            }}
        >
            <Typography>Настройки вопроса</Typography>
            {/* <CustomCheckbox
                sx={{
                    display: isMobile ? "flex" : "block",
                    mr: isMobile ? "0px" : "16px",
                }}
                label={"Автозаполнение адреса"}
                checked={question.content.autofill}
                handleChange={({ target }) => {
                    updateQuestion(question.id, question => {
                        question.content.autofill = target.checked;
                    });
                }}
            /> */}
            <CustomCheckbox
                sx={{
                    display: isMobile ? "flex" : "block",
                    mr: isMobile ? "0px" : "16px",
                }}
                label={"Необязательный вопрос"}
                checked={!question.content.required}
                handleChange={(e) => {
                    updateQuestion<QuizQuestionFile>(question.id, question => {
                        question.content.required = !e.target.checked;
                    });
                }}
            />
            {/*<Box*/}
            {/*    sx={{*/}
            {/*        width: isMobile ? "90%" : "auto",*/}
            {/*        display: "flex",*/}
            {/*        alignItems: "center",*/}
            {/*    }}*/}
            {/*>*/}
            {/*    <CustomCheckbox*/}
            {/*        sx={{*/}
            {/*            mr: isMobile ? "0px" : "16px",*/}
            {/*            height: isMobile ? "100%" : "26px",*/}
            {/*            alignItems: "flex-start",*/}
            {/*        }}*/}
            {/*        label={"Внутреннее название вопроса"}*/}
            {/*        checked={question.content.innerNameCheck}*/}
            {/*        handleChange={({ target }) => {*/}
            {/*            updateQuestion<QuizQuestionFile>(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)}*/}
            {/*        sx={{ paddingRight: "20px" }}*/}
            {/*    />*/}
            {/*)}*/}
        </Box>
    );
}