<template>
  <VPdfViewer
    v-if="!isViewerDisabled"
    :darkMode="true"
    :initialThumbnailsVisible="true"
    :src="openedFile.url"
    local="fr_FR"
    @loaded="onPdfLoaded"
  />
  <button
    id="toggle-comments"
    :aria-pressed="isCommentsOpen"
    class="btn btn--transparent btn--outline"
    data-icon="comment"
    @click="isCommentsOpen = !isCommentsOpen"
  >
    <span class="sr-only"
      >{{ isCommentsOpen ? 'Masquer' : 'Afficher' }} les commentaires</span
    >
  </button>
  <a
    id="download-pdf"
    class="btn btn--transparent btn--outline"
    data-icon="download"
    :href="openedFile.url"
    download
  >
    <span class="sr-only">Télécharger le fichier PDF</span>
  </a>
  <Comments v-if="isCommentsOpen" />
</template>

<script setup>
import Comments from '../comments/Comments.vue';
import { ref, watch, computed, unref } from 'vue';
import { useDialogStore } from '../../stores/dialog';
import { storeToRefs } from 'pinia';
import { VPdfViewer, useLicense } from '@vue-pdf-viewer/viewer';

const licenseKey =
  import.meta.env.VITE_VPV_LICENSE ??
  'eyJkYXRhIjoiZXlKMElqb2laR1YyWld4dmNHVnlJaXdpWVhaMUlqb3hOell3TVRRd056azVMQ0prYlNJNkltUmxjMmxuYm5SdmNHRmpheTVuY205MWNHVXRjRzlqYUdWMExtWnlJaXdpYmlJNklqY3lOVFU0T0dNeVl6VXlOR1prTVdNaUxDSmxlSEFpT2pFM09EZzFOall6T1Rrc0ltUnRkQ0k2SW5Od1pXTnBabWxqSWl3aWNDSTZJblpwWlhkbGNpSjkiLCJzaWduYXR1cmUiOiJwajRFT0dIZndyVkhqS0I5OE42cjhVWklwSndYc0VuU1pLUmZ6MVk1TlREaGJSQStsNXB5a2g3OUs4azhYclRSSFU1MVc2NnJYa0pyWFRmTm9qa0k0NWJnSzQwQlQzYmo5L3ZmWlRVV09sbWNrU0J2QmM1NUhGOUNNVWhFMGpnSkxGMmFubmlDaXhzQVdvQVZEWVpFL1pxb1pxSzY0ZVdKaEl5cW9ERFFZUGxFVy9Kb1dnTzlIZWluWEhob0RNY2IvTjdlajB2eTAzSnBVNHRZSTI0WlV5a1VXUmZCUm03d0VuTWwvMXlsUlBqRUU3RnVuaGM5SDQ1RXpaUno4QmR5eGgwS0RseGFwallzb2ZacE1LWGdNOXFEWTVUSDZ5WEpDcVlnVnpMRS9GdWVSN3RkRFA3ZFNYUC96K1JNQjhWbHNmSGhwNCtwSzJobXZQZ0ovU3RVc0E9PSJ9';
useLicense({ licenseKey });

const { openedFile, isCommentsOpen, comments, draftComment } = storeToRefs(
  useDialogStore()
);

const currentPageIndex = ref(1);

// Functions
const onPdfLoaded = () => {
  const wrapper = document.querySelector('.vpv-pages-inner-container');

  const observer = new IntersectionObserver(
    (entries) => {
      entries.forEach((entry, index) => {
        if (entry.intersectionRatio > 0.5) {
          currentPageIndex.value = parseInt(
            entry.target.getAttribute('aria-label').split(' ')[1]
          );
        }
      });
    },
    {
      root: wrapper,
      threshold: [0.5],
    }
  );

  const observePages = () => {
    const pages = document.querySelectorAll('.vpv-page-inner-container');
    pages.forEach((page) => {
      if (!page.__observed__) {
        observer.observe(page);
        page.__observed__ = true;
      }
    });
  };

  const mutationObserver = new MutationObserver(() => {
    observePages();
  });

  if (wrapper) {
    mutationObserver.observe(wrapper, { childList: true, subtree: true });
  }

  observePages();
};
</script>

<style scoped>
@import '../../assets/css/src/2.blocks.pdf-viewer.css';
</style>
