frontPanel/src/pages/Questions/PageOptions/SettingPageOptions.tsx

import {
  Box,
  Tooltip,
  Typography,
  useMediaQuery,
  useTheme,
} from "@mui/material";
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 { QuizQuestionPage } from "../../../model/questionTypes/page";
import { setQuestionInnerName, updateQuestion } from "@root/questions/actions";

type SettingPageOptionsProps = {
  question: QuizQuestionPage;
};

export default function SettingPageOptions({
  question,
}: SettingPageOptionsProps) {
  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 ? "25px" : "20px",
        pb: isMobile ? "25px" : "20px",
        pl: "20px",
        pr: "20px",
        display: "flex",
        flexDirection: "column",
        gap: "14px",
        width: isMobile ? "auto" : "100%",
      }}
    >
      <Typography
        sx={{
          height: isMobile ? "18px" : "auto",
          fontWeight: "500",
          fontSize: "18px",
          color: " #4D4D4D",
        }}
      >
        Настройки вопроса
      </Typography>
      {/*<Box sx={{ display: "flex", alignItems: "flex-start" }}>*/}
      {/*    <CustomCheckbox*/}
      {/*        sx={{*/}
      {/*            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 = "";*/}
      {/*            })*/}
      {/*        }*/}
      {/*    />*/}
      {/*    <Tooltip*/}
      {/*        title="Будет отображаться как заголовок вопроса в приходящих заявках."*/}
      {/*        placement="top"*/}
      {/*    >*/}
      {/*        <Box>*/}
      {/*            <InfoIcon />*/}
      {/*        </Box>*/}
      {/*    </Tooltip>*/}
      {/*</Box>*/}
      {/*{question.content.innerNameCheck && (*/}
      {/*    <CustomTextField*/}
      {/*        placeholder={"Внутреннее описание вопроса"}*/}
      {/*        text={question.content.innerName}*/}
      {/*        onChange={({ target }) => setInnerName(target.value)}*/}
      {/*    />*/}
      {/*)}*/}
    </Box>
  );
}