frontPanel/src/pages/Questions/DropDown/settingDropDown.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 { QuizQuestionSelect } from "../../../model/questionTypes/select";


type SettingDropDownProps = {
    question: QuizQuestionSelect;
};

export default function SettingDropDown({ question }: SettingDropDownProps) {
    const theme = useTheme();
    const isFigmaTablte = useMediaQuery(theme.breakpoints.down(990));
    const isMobile = useMediaQuery(theme.breakpoints.down(790));

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

    const debounceAnswer = useDebouncedCallback((value) => {
        updateQuestion(question.id, question => {
            if (question.type !== "select") return;

            question.content.default = value;
        });
    }, 200);

    return (
        <>
            <Box
                sx={{
                    position: "relative",
                    display: "flex",
                    gap: "20px",
                    width: "100%",
                    justifyContent: "space-between",
                    flexDirection: isMobile ? "column" : null,
                }}
            >
                <Box
                    sx={{
                        pt: isMobile ? "25px" : "20px",
                        pb: isMobile ? "25px" : "20px",
                        pl: "20px",
                        display: "flex",
                        flexDirection: "column",
                        gap: "14px",
                        width: "100%",
                        maxWidth: isFigmaTablte ? "297px" : "360px",
                    }}
                >
                    {/* <Typography
                        sx={{
                            height: isMobile ? "18px" : "auto",
                            fontWeight: "500",
                            fontSize: "18px",
                            color: " #4D4D4D",
                        }}
                    >
                        Настройки ответов
                    </Typography>
                    <CustomCheckbox
                        label={"Можно несколько"}
                        checked={question.content.multi}
                        dataCy="multiple-answers-checkbox"
                        handleChange={({ target }) =>
                            updateQuestion(question.id, question => {
                                if (question.type !== "select") return;

                                question.content.multi = target.checked;
                            })
                        }
                    /> */}
                    <Box
                        sx={{
                            display: isMobile ? "none" : "block",
                            mt: isMobile ? "11px" : "6px",
                        }}
                    >
                        <Typography
                            sx={{
                                height: isMobile ? "18px" : "auto",
                                fontWeight: "500",
                                fontSize: "18px",
                                color: " #4D4D4D",
                                mb: "14px",
                            }}
                        >
                            Текст в выпадающем списке
                        </Typography>
                        <CustomTextField
                            placeholder={"Выберите вариант"}
                            text={question.content.default}
                            onChange={({ target }) => debounceAnswer(target.value)}
                        />
                    </Box>
                </Box>
                <Box
                    sx={{
                        pt: isMobile ? "0px" : "20px",
                        pb: "20px",
                        pl: isFigmaTablte ? (isMobile ? "20px" : "30px") : "0px",
                        pr: isFigmaTablte ? "19px" : "20px",
                        display: "flex",
                        flexDirection: "column",
                        gap: "14px",
                        width: isMobile ? "auto" : "100%",
                    }}
                >
                    <Typography
                        sx={{
                            height: isMobile ? "18px" : "auto",
                            fontWeight: "500",
                            fontSize: "18px",
                            color: " #4D4D4D",
                        }}
                    >
                        Настройки вопросов
                    </Typography>
                    <CustomCheckbox
                        label={"Необязательный вопрос"}
                        checked={!question.content.required}
                        handleChange={(e) => {
                            updateQuestion<QuizQuestionSelect>(question.id, question => {
                                question.content.required = !e.target.checked;
                            });
                        }}
                    />
                    {/*<Box sx={{ position: "relative", display: "flex", alignItems: "flex-start" }}>*/}
                    {/*    <CustomCheckbox*/}
                    {/*        sx={{ height: isMobile ? "100%" : "26px", alignItems: isMobile ? "flex-start" : "center" }}*/}
                    {/*        label={"Внутреннее название вопроса"}*/}
                    {/*        checked={question.content.innerNameCheck}*/}
                    {/*        handleChange={({ target }) => {*/}
                    {/*            updateQuestion<QuizQuestionSelect>(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>*/}
                    <Box
                        sx={{
                            width: "100%",
                            pt: "20px",
                            display: isMobile ? "block" : "none",
                        }}
                    >
                        <Typography
                            sx={{
                                height: isMobile ? "18px" : "auto",
                                fontWeight: "500",
                                fontSize: "18px",
                                color: " #4D4D4D",
                                mb: "10px",
                            }}
                        >
                            Текст в выпадающем списке
                        </Typography>
                        <CustomTextField
                            placeholder={"Выберите вариант"}
                            text={question.content.default}
                            onChange={({ target }) => debounceAnswer(target.value)}
                        />
                    </Box>
                    {/*{question.content.innerNameCheck && (*/}
                    {/*    <CustomTextField*/}
                    {/*        placeholder={"Развёрнутое описание вопроса"}*/}
                    {/*        text={question.content.innerName}*/}
                    {/*        onChange={({ target }) => debounced(target.value || " ")}*/}
                    {/*    />*/}
                    {/*)}*/}
                </Box>
            </Box>
        </>
    );
}