import {
  Box,
  Button,
  IconButton,
  Modal,
  Typography,
  useMediaQuery,
  useTheme,
} from "@mui/material";
import {
  copyQuestion,
  deleteQuestion,
  deleteQuestionWithTimeout,
  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";
import { CopyIcon } from "@icons/questionsPage/CopyIcon";
import { DeleteFunction } from "@utils/deleteFunc";
import { DeleteIcon } from "@icons/questionsPage/deleteIcon";
import { useCurrentQuiz } from "@root/quizes/hooks";
import { useQuestionsStore } from "@root/questions/store";
import { updateDesireToOpenABranchingModal } from "@root/uiTools/actions";

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 quiz = useCurrentQuiz();
  const { questions } = useQuestionsStore.getState();
  const [openDelete, setOpenDelete] = useState<boolean>(false);

  const openedModal = () => {
    updateDesireToOpenABranchingModal(question.content.id);
  };

  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>
      <Box
        sx={{
          display: "flex",
          alignItems: "center",
          justifyContent: "end",
          width: "100%",
          background: "#f2f3f7",
          height: isMobile ? "92px" : "70px",
        }}
      >
        <Box
          sx={{
            padding: "20px",
            display: "flex",
            gap: "6px",
          }}
        >
          {/* <IconButton sx={{ borderRadius: "6px", padding: "2px" }}>
                    <HideIcon style={{ color: "#4D4D4D" }} />
                </IconButton> */}
          <IconButton
            sx={{ borderRadius: "6px", padding: "2px" }}
            onClick={() => copyQuestion(question.id, question.quizId)}
          >
            <CopyIcon color={"#4D4D4D"} />
          </IconButton>
          <IconButton
            sx={{ borderRadius: "6px", padding: "2px" }}
            onClick={() => {
              if (question.type === null) {
                deleteQuestion(question.id);
              }
              if (question.content.rule.parentId.length !== 0) {
                setOpenDelete(true);
              } else {
                deleteQuestionWithTimeout(question.id, () =>
                  DeleteFunction(questions, question, quiz),
                );
              }
            }}
            data-cy="delete-question"
          >
            <DeleteIcon color={"#4D4D4D"} />
          </IconButton>
          <Modal open={openDelete} onClose={() => setOpenDelete(false)}>
            <Box
              sx={{
                position: "absolute",
                top: "50%",
                left: "50%",
                transform: "translate(-50%, -50%)",
                padding: "30px",
                borderRadius: "10px",
                background: "#FFFFFF",
              }}
            >
              <Typography variant="h6" sx={{ textAlign: "center" }}>
                Вы удаляете вопрос, участвующий в ветвлении. Все его потомки
                потеряют данные ветвления. Вы уверены, что хотите удалить
                вопрос?
              </Typography>
              <Box
                sx={{
                  marginTop: "30px",
                  display: "flex",
                  justifyContent: "center",
                  gap: "15px",
                }}
              >
                <Button
                  variant="contained"
                  sx={{ minWidth: "150px" }}
                  onClick={() => setOpenDelete(false)}
                >
                  Отмена
                </Button>
                <Button
                  variant="contained"
                  sx={{ minWidth: "150px" }}
                  onClick={() => {
                    deleteQuestionWithTimeout(question.id, () =>
                      DeleteFunction(questions, question, quiz),
                    );
                  }}
                >
                  Подтвердить
                </Button>
              </Box>
            </Box>
          </Modal>
        </Box>
      </Box>

      {/*<ButtonsOptions*/}
      {/*  switchState={switchState}*/}
      {/*  SSHC={SSHC}*/}
      {/*  question={question}*/}
      {/*/>*/}
      {/*<SwitchPageOptions switchState={switchState} question={question} />*/}
    </>
  );
}