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

import { Box, Typography, useMediaQuery, useTheme } from "@mui/material";
import { updateQuestion } from "@root/questions/actions";
import CustomCheckbox from "@ui_kit/CustomCheckbox";
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));

  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: "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
          dataCy="checkbox-optional-question"
          sx={{
            display: isMobile ? "flex" : "block",
            mr: isMobile ? "0px" : "16px",
            alignItems: isMobile ? "flex-end" : "center",
          }}
          label={"Необязательный вопрос"}
          checked={!question.content.required}
          handleChange={(e) => {
            updateQuestion<QuizQuestionText>(question.id, (question) => {
              question.content.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<QuizQuestionText>(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>
  );
}