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 comments = computed(() => {
    return openedFile.value.comments;
  });

  function updateFile(newFile) {
    console.log(newFile);
    openedFile.value = newFile;

    // if (!content.value.files) return;
    // content.value.files = content.value.files.map((file) =>
    //   file.id === newFile.id ? newFile : file
    // );
  }

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

  const draftComment = ref({});
  watch(
    draftComment,
    (newVal) => {
      if (draftComment.value.position) showDraftMarker(newVal);
    },
    { deep: true }
  );
  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");

    container.appendChild(bubble);
  }

  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 setCommentMarkers() {
    if (!comments.value) return;
    comments.value.forEach((comment) => {
      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?.pageIndex
          ? document.querySelector(
              `.vpv-page-inner-container[aria-label="page ${comment.position.pageIndex}"] .page-inner-container`
            )
          : document.querySelector(".track");

        container.appendChild(bubble);

        setTimeout(() => {
          bubble.addEventListener("mouseenter", () => highlight(comment));
          bubble.addEventListener("mouseleave", () => unhighlight(comment));
        }, 100);
      }, timeOut);
    });
  }

  function removeCommentMarkers() {
    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,
    openedFile,
    comments,
    draftComment,
    isCommentsOpen,
    updateFile,
  };
});