<template>
  <Dialog
    id="add-pdf"
    v-model:visible="isOpen"
    modal
    :draggable="false"
    dismissableMask="true"
    header="Titre du PDF"
    class="dialog"
    :class="[
      { 'with-comments': isCommentsOpen },
      { 'with-dtl': correspondingDTLProposal },
    ]"
    :closeOnEscape="true"
  >
    <template #header>
      <button
        v-if="
          dialog.content.id === 'clientBrief' &&
          dialog.content.isValidated !== true
        "
        class="btn"
        @click="validate()"
      >
        Valider et envoyer le brief
      </button>
      <h2
        v-if="openedFile"
        class="font-serif text-lg"
        :title="openedFile?.label.length ? openedFile.label : openedFile.name"
      >
        {{ openedFile?.label.length ? openedFile.label : openedFile.name }}
      </h2>
    </template>
    <div id="vpv-container">
      <PdfViewer />
    </div>
  </Dialog>
  <DTLPanel
    v-if="correspondingDTLProposal"
    :proposals="[correspondingDTLProposal]"
  />
</template>

<script setup>
import Dialog from "primevue/dialog";
import PdfViewer from "./PdfViewer.vue";
import DTLPanel from "../design-to-light/DTLPanel.vue";
import { computed, ref, watch } from "vue";
import { useDialogStore } from "../../stores/dialog";
import { useRoute, useRouter } from "vue-router";
import { storeToRefs } from "pinia";
import { useApiStore } from "../../stores/api";
import { usePageStore } from "../../stores/page";

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

const router = useRouter();
const route = useRoute();

const dialog = useDialogStore();
const api = useApiStore();
const { page } = storeToRefs(usePageStore());

const isOpen = ref(true);
const hasDTLProposal = computed(() => {
  return page.value?.designToLight;
});

watch(isOpen, (newValue) => {
  router.push({ name: route.name });
  openedFile.value = null;
});

openedFile.value = route.query.fileIndex
  ? dialog.content.files[route.query.fileIndex]
  : dialog.content.files.find((file) => file.type === "document");

const correspondingDTLProposal = computed(() => {
  if (!hasDTLProposal.value || !isOpen.value || !openedFile.value) return false;

  const correspondingDTLProposal = page.value.designToLight.find((proposal) => {
    return openedFile.value.source === proposal.location?.source;
  });

  if (!correspondingDTLProposal) return false;

  return correspondingDTLProposal;
});

// Functions
async function validate() {
  const response = await api.validateBrief(
    route.path + "/client-brief",
    route.fullPath
  );
  if (response.success) {
    dialog.content.isValidated = true;
  } else {
    console.alert(response);
  }
}
</script>

<style>
#vpv-container {
  width: var(--dialog-max-w);
  height: calc(var(--dialog-max-h) - var(--dialog-header-h));
  background: black;
  position: relative;
}
.with-comments .vpv-pages-container-wrapper {
  margin-right: var(--dialog-comments-w, 20rem);
}
</style>
