import { defineStore } from "pinia";
import { ref, computed, watch } from "vue";
import { useRoute } from "vue-router";

export const useDialogStore = defineStore("dialog", () => {
  const content = ref(null);
  const openedFile = ref(null);
  const activeTracks = ref(null);
  const vpvRef = ref(null);

  const comments = computed(() => {
    if (activeTracks.value?.length > 0) {
      return activeTracks.value[0].files.flatMap((file) =>
        file.comments ? file.comments : []
      );
    }
    return openedFile.value.comments;
  });

  function updateFile(newFile) {
    openedFile.value = newFile;
  }

  const route = useRoute();
  const isCommentPanelEnabled = ref(true);
  const isCommentsOpen = ref(
    route.query.hasOwnProperty("comments") ? true : false
  );
  const openedComment = ref(null);

  const draftComment = ref({});
  watch(
    draftComment,
    (newVal) => {
      if (draftComment.value.position) showDraftMarker(newVal);
    },
    { deep: true }
  );

  const isViewerDisabled = ref(false);
  watch(isCommentsOpen, (newVal) => {
    if (newVal) {
      setCommentMarkers();
    } else {
      removeCommentMarkers();
    }
  });
  watch(openedFile, () => {
    removeCommentMarkers();
    if (isCommentsOpen.value) {
      setCommentMarkers();
    }
  });
  watch(openedFile, (newVal, oldVal) => {
    if (!isCommentsOpen.value || !oldVal || newVal.url == oldVal.url) return;

    isViewerDisabled.value = true;

    setTimeout(() => {
      isViewerDisabled.value = false;
      removeCommentMarkers();
      if (newVal.comments) {
        setCommentMarkers();
      }
    }, 100);
  });

  function resetCommentMarkers() {
    removeCommentMarkers();
    setCommentMarkers();
  }

  function showDraftMarker(draftComment) {
    const bubble = document.createElement("a");

    bubble.classList.add("comment-marker");
    bubble.classList.add("comment-marker--draft");
    bubble.style.left = draftComment.position.x + "%";
    bubble.style.top = draftComment.position.y + "%";
    bubble.href = "#comment-" + draftComment.id;

    const container = draftComment.position.pageIndex
      ? document.querySelector(
          `.vpv-page-inner-container[aria-label="page ${draftComment.position.pageIndex}"] .page-inner-container`
        )
      : document.querySelector(".track");

    try {
      container.appendChild(bubble);
    } catch (error) {
      console.log(
        `Can't show draft comment on page ${draftComment.position.pageIndex} : `,
        error
      );
    }
  }
  function setCommentMarkers() {
    if (!comments.value) return;
    comments.value.forEach((comment) => {
      if (comment.location.file.uuid !== openedFile.value.uuid) return;
      if (comment.type === "comment-reply") return;
      let correspondingMarker = document.querySelector(
        `.comment-marker[href="#comment-${comment.id}"]`
      );
      if (correspondingMarker) return;

      const bubble = document.createElement("a");

      bubble.classList.add("comment-marker");
      bubble.style.left = comment.position.x + "%";
      bubble.style.top = comment.position.y + "%";
      bubble.href = "#comment-" + comment.id;

      let container = comment.position?.pageIndex
        ? document.querySelector(
            `.vpv-page-inner-container[aria-label="page ${comment.position.pageIndex}"] .page-inner-container`
          )
        : document.querySelector(".track");

      const timeOut = container ? 0 : 500;
      setTimeout(() => {
        container = comment.position?.hasOwnProperty("pageIndex")
          ? document.querySelector(
              `.vpv-page-inner-container[aria-label="page ${comment.position.pageIndex}"] .page-inner-container`
            )
          : document.querySelector(".track");

        try {
          correspondingMarker = document.querySelector(
            `.comment-marker[href="#comment-${comment.id}"]`
          );
          if (correspondingMarker) return;
          container.appendChild(bubble);
          setTimeout(() => {
            bubble.addEventListener("mouseenter", () => highlight(comment));
            bubble.addEventListener("mouseleave", () => unhighlight(comment));
          }, 100);
        } catch (error) {
          console.log(
            `Impossible de monter la bulle du commentaire ${comment.id}. La page n°${comment.position.pageIndex} n'existe pas dans le DOM.`
          );
        }
      }, timeOut);
    });
  }

  function removeCommentMarkers() {
    console.log("remove comment markers");
    document.querySelectorAll(".comment-marker").forEach((bubble) => {
      bubble.parentNode.removeChild(bubble);
    });
  }

  function highlight(comment) {
    const target = document.querySelector("#comment-" + comment.id);
    target.classList.add("highlight");
  }
  function unhighlight(comment) {
    const target = document.querySelector("#comment-" + comment.id);
    target.classList.remove("highlight");
  }

  return {
    content,
    activeTracks,
    openedFile,
    comments,
    draftComment,
    isCommentsOpen,
    isCommentPanelEnabled,
    updateFile,
    openedComment,
    resetCommentMarkers,
    vpvRef,
  };
});