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

import { Box, useMediaQuery, useTheme } from "@mui/material";
import { updateQuestion } from "@root/questions/actions";
import CustomTextField from "@ui_kit/CustomTextField";

import { useState } from "react";
import { useDebouncedCallback } from "use-debounce";
import type { QuizQuestionPage } from "../../../model/questionTypes/page";
import ButtonsOptions from "../ButtonsOptions";
import SwitchPageOptions from "./switchPageOptions";
import { MediaSelectionAndDisplay } from "@ui_kit/MediaSelectionAndDisplay";

type Props = {
  disableInput?: boolean;
  question: QuizQuestionPage;
};

export default function PageOptions({ disableInput, question }: Props) {
  const [switchState, setSwitchState] = useState("setting");
  const theme = useTheme();
  const isTablet = useMediaQuery(theme.breakpoints.down(980));
  const isFigmaTablet = useMediaQuery(theme.breakpoints.down(990));
  const isMobile = useMediaQuery(theme.breakpoints.down(780));

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

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

  const SSHC = (data: string) => {
    setSwitchState(data);
  };

  return (
    <>
      <Box
        sx={{
          width: isTablet ? "auto" : "100%",
          maxWidth: isFigmaTablet ? "549px" : "640px",
          display: "flex",
          px: "20px",
          flexDirection: "column",
        }}
      >
        <Box sx={{ display: disableInput ? "none" : "", mt: isMobile ? "15px" : "0px" }}>
          <CustomTextField
            placeholder={"Можно добавить текст"}
            text={question.content.text}
            onChange={({ target }) => setText(target.value)}
          />
        </Box>

        <MediaSelectionAndDisplay resultData={question} />
      </Box>
      <ButtonsOptions switchState={switchState} SSHC={SSHC} question={question} />
      <SwitchPageOptions switchState={switchState} question={question} />
    </>
  );
}