frontPanel/src/pages/Questions/OwnTextField/settingTextField.tsx

import {
    Box,
    FormControl,
    FormControlLabel,
    Radio,
    RadioGroup,
    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 CheckedIcon from "@ui_kit/RadioCheck";
import CheckIcon from "@ui_kit/RadioIcon";
import { useDebouncedCallback } from "use-debounce";
import InfoIcon from "../../../assets/icons/InfoIcon";
import type { QuizQuestionText } from "../../../model/questionTypes/text";


type SettingTextFieldProps = {
    question: QuizQuestionText;
};

type Answer = {
    name: string;
    value: "single" | "multi";
};

const ANSWER_TYPES: Answer[] = [
    { name: "Однострочное", value: "single" },
    { name: "Многострочное", value: "multi" },
];

export default function SettingTextField({
    question,
}: SettingTextFieldProps) {
    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 debounced = useDebouncedCallback((value) => {
        setQuestionInnerName(question.id, value);
    }, 200);

    return (
        <Box
            sx={{
                display: "flex",
                justifyContent: "space-between",
                flexDirection: isWrappColumn ? "column" : null,
                marginRight: isFigmaTablte ? "0px" : "32px",
            }}
        >
            <Box
                sx={{
                    pt: isMobile ? "25px" : "20px",
                    pb: isMobile ? "25px" : "20px",
                    pl: "20px",
                }}
            >
                <Typography
                    sx={{
                        fontWeight: "500",
                        fontSize: "18px",
                        color: " #4D4D4D",
                        marginBottom: "14px",
                    }}
                >
                    Настройки ответов
                </Typography>
                <FormControl>
                    <RadioGroup
                        sx={{
                            display: "flex",
                            flexDirection: "column",
                            gap: "14px",
                            width: "100%",
                        }}
                        aria-labelledby="demo-controlled-radio-buttons-group"
                        name="controlled-radio-buttons-group"
                        value={ANSWER_TYPES.findIndex(
                            ({ value }) => question.content.answerType === value
                        )}
                        onChange={({ target }: React.ChangeEvent<HTMLInputElement>) => {
                            updateQuestion(question.id, question => {
                                if (question.type !== "text") return;

                                question.content.answerType = ANSWER_TYPES[Number(target.value)].value;
                            });
                        }}
                    >
                        {ANSWER_TYPES.map(({ name }, index) => (
                            <FormControlLabel
                                key={index}
                                sx={{
                                    height: "26px",
                                    color: theme.palette.grey2.main,
                                    "& .MuiRadio-root": { padding: "8px 9px" },
                                }}
                                value={index}
                                control={
                                    <Radio icon={<CheckIcon />} checkedIcon={<CheckedIcon />} />
                                }
                                label={name}
                            />
                        ))}
                    </RadioGroup>
                </FormControl>
                <CustomCheckbox
                    sx={{
                        display: isMobile ? "flex" : "block",
                        mr: isMobile ? "0px" : "16px",
                        marginTop: "15px",
                        alignItems: isMobile ? "flex-end" : "center",
                    }}
                    label={"Только числа"}
                    checked={question.content.onlyNumbers}
                    handleChange={({ target }) => {
                        updateQuestion(question.id, question => {
                            if (question.type !== "text") return;

                            question.content.onlyNumbers = target.checked;
                        });
                    }}
                />
            </Box>
            <Box
                sx={{
                    pt: isMobile ? "0px" : "20px",
                    pb: "20px",
                    pl: isFigmaTablte ? (isWrappColumn ? "20px" : "34px") : "20px",
                    pr: "20px",
                    display: "flex",
                    flexDirection: "column",
                    gap: "14px",
                }}
            >
                <Typography
                    sx={{
                        height: isMobile ? "18px" : "auto",
                        fontWeight: "500",
                        fontSize: "18px",
                        color: " #4D4D4D",
                    }}
                >
                    Настройки вопросов
                </Typography>
                <CustomCheckbox
                    sx={{
                        display: isMobile ? "flex" : "block",
                        mr: isMobile ? "0px" : "16px",
                        alignItems: isMobile ? "flex-end" : "center",
                    }}
                    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",
                        alignItems: isMobile ? "flex-end" : "center",
                    }}
                    label={"Необязательный вопрос"}
                    checked={!question.required}
                    handleChange={(e) => {
                        updateQuestion(question.id, question => {
                            question.required = !e.target.checked;
                        });
                    }}
                />
                <Box
                    sx={{
                        width: isMobile ? "90%" : "auto",
                        display: "flex",
                        alignItems: "center",
                    }}
                >
                    <CustomCheckbox
                        sx={{
                            alignItems: isMobile ? "flex-start" : "center",
                            display: isMobile ? "flex" : "block",
                            mr: isMobile ? "0px" : "16px",
                            height: isMobile ? "100%" : "26px",
                        }}
                        label={"Внутреннее название вопроса"}
                        checked={question.content.innerNameCheck}
                        handleChange={({ target }) => {
                            updateQuestion(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 }) => debounced(target.value)}
                    />
                )}
            </Box>
        </Box>
    );
}