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} />
    </>
  );
}