import { Question } from "@/types";
import { useMarkStore } from "@/store";
import { watch, nextTick } from "vue";
import useTaskRejection from "./useTaskRejection";

/** chooseQuestion 当currentTask改变是，自动选择第一题 */
export default function useAutoChooseFirstQuestion() {
  const markStore = useMarkStore();
  const { showRejectedReason } = useTaskRejection();

  // 监听currentTask的变化，自动选择第一题
  function watchCurrentTaskChooseQuestion() {
    watch(
      () => markStore.currentTask,
      () => {
        // 重置当前选择的quesiton和score
        markStore.currentQuestion = undefined;
        markStore.currentScore = undefined;

        // FIXed ME: 此时取到的还是score:null，但是 chooseQuestion之后就变成了score:0
        const firstQuestion = markStore.currentTask?.questionList.find(
          (question) => !isDisabledQuestion(question)
        );
        if (firstQuestion) {
          chooseQuestion(firstQuestion);
        }
      },
      {
        immediate: true,
      }
    );
  }

  const scrollToQuestionOfBoard = async (question: Question) => {
    const node = document.querySelector(
      `#bq-${question.mainNumber}-${question.subNumber}`
    );
    const questionNode = document.querySelector(
      `#q-${question.mainNumber}-${question.subNumber}`
    );
    if (!questionNode) {
      // 非多媒体阅卷
      node && node.scrollIntoView({ block: "center", behavior: "smooth" });
      return;
    }
    // console.log(node);
    // node && node.scrollIntoView({ behavior: "smooth" });
    // if (node) node.scrollBy({ top: -50 });
    // setTimeout(() => {
    //   if (node) node.parentElement?.scrollTo({ top: 50, left: 0 });
    //   // node && node.scrollTop = 50//node.scrollIntoView({ behavior: "auto", block: "center" });
    //   if(node.)
    // }, 1500);
    async function checkIfEleMoving(ele: Element) {
      const { top: oldTop } = ele.getBoundingClientRect();
      await new Promise((res) => setTimeout(res, 200));
      // console.log(ele.getBoundingClientRect().top, oldTop);
      return ele.getBoundingClientRect().top - oldTop !== 0;
    }
    if (questionNode) {
      let isMoving = await checkIfEleMoving(questionNode);
      while (isMoving) {
        isMoving = await checkIfEleMoving(questionNode);
      }
      node && node.scrollIntoView({ block: "center", behavior: "smooth" });
    }
  };

  // 是否处于仲裁阶段
  function isArbitrated(question: Question) {
    return ["WAIT_ARBITRATE", "ARBITRATED"].includes(question.status);
  }

  function getArbitratedStatusName(question: Question) {
    if (question.status === "WAIT_ARBITRATE") {
      return "待仲裁";
    } else if (question.status === "ARBITRATED") {
      return "已仲裁";
    }
    return "";
  }

  function isDisabledQuestion(question: Question) {
    return (
      (!markStore.historyOpen && !question.selfMark) ||
      (markStore.historyOpen && question.problem) ||
      isArbitrated(question)
    );
  }

  function chooseQuestion(question: Question) {
    if (isDisabledQuestion(question)) return;

    markStore.currentQuestion = question;
    // FIXME: maybe should be an async function, temp fix for eslint
    void scrollToQuestionOfBoard(question);

    void nextTick(() => {
      if (markStore.currentQuestion) {
        showRejectedReason(markStore.currentQuestion);
      }
    });
  }

  return {
    watchCurrentTaskChooseQuestion,
    chooseQuestion,
    isDisabledQuestion,
    isArbitrated,
    getArbitratedStatusName,
  };
}