<script setup lang="ts">
import { ref, watch, computed } from "vue";
import { useQuasar } from "quasar";
import { VuePDF, usePDF } from "@tato30/vue-pdf";
import axios from "axios";

import { useCounterMixin } from "@/stores/mixin";

import type { DataFileDownload } from "@/modules/18_command/interface/response/Main";

import DialogHeader from "@/components/DialogHeader.vue";

const $q = useQuasar();
const { messageError } = useCounterMixin();

const modal = defineModel<boolean>("modal", { required: true });
const dataFile = defineModel<DataFileDownload | undefined>("dataFile", {
  required: false,
});

// Computed properties for navigation
const canGoPrevious = computed(() => page.value > 1);
const canGoNext = computed(() => page.value < numOfPages.value);

const pdfSrc = ref<any | undefined>();
const numOfPages = ref<number>(0);
const page = ref<number>(1);
const isLoadPDF = ref<boolean>(false);
const currentObjectUrl = ref<string | null>(null);
const title = ref<string>("");

/**
 * function loafFile PDF
 * @param url linkLoadFile
 * @param type ประเภทไฟล์
 */
async function fetchPDF(url: string, type: string) {
  isLoadPDF.value = false;
  axios
    .get(url, {
      method: "GET",
      responseType: "blob",
      headers: {
        "Content-Type": "application/json",
        Accept: type, // ถ้ามีการระบุเมื่ออัปโหลด
      },
    })
    .then(async (res) => {
      const blob = new Blob([res.data]);
      const objectUrl = URL.createObjectURL(blob);
      currentObjectUrl.value = objectUrl;
      const pdfData = usePDF(`${objectUrl}`);
      setTimeout(() => {
        pdfSrc.value = pdfData.pdf.value;
        numOfPages.value = pdfData.pages.value;
        isLoadPDF.value = true;
      }, 1500);
    })
    .catch((err) => {
      messageError($q, err);
    });
}

function onClose() {
  modal.value = false;
}

/** Navigate to previous page*/
function goToPreviousPage() {
  if (canGoPrevious.value) {
    page.value--;
  }
}

/** Navigate to next page*/
function goToNextPage() {
  if (canGoNext.value) {
    page.value++;
  }
}

function onDownloadFile() {
  if (currentObjectUrl.value) {
    const fileName = dataFile.value ? dataFile.value.fileName : "";
    const link = document.createElement("a");
    link.href = currentObjectUrl.value;
    link.download = `${fileName}.pdf`;
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
  }
}

watch(modal, (val) => {
  if (val && dataFile.value) {
    fetchPDF(dataFile.value.downloadUrl, dataFile.value.fileType);
    title.value = dataFile.value.fileName;
  } else {
    pdfSrc.value = undefined;
    page.value = 1;
    numOfPages.value = 0;
  }
});
</script>

<template>
  <q-dialog
    v-model="modal"
    persistent
    :maximized="true"
    transition-show="slide-up"
    transition-hide="slide-down"
  >
    <q-card class="column full-height bg-grey-2">
      <DialogHeader :tittle="title" :close="onClose" class="bg-white" />

      <q-separator />

      <div
        v-if="isLoadPDF"
        class="bg-white q-py-xs q-px-md row justify-center items-center q-gutter-sm shadow-1"
      >
        <q-btn
          flat
          round
          icon="mdi-chevron-left"
          :disable="!canGoPrevious"
          @click="goToPreviousPage"
          color="primary"
        />

        <q-chip
          outline
          color="primary"
          label-color="grey-9"
          class="q-px-lg text-weight-bold"
        >
          หน้า {{ page }} / {{ numOfPages || "-" }}
        </q-chip>

        <q-btn
          flat
          round
          icon="mdi-chevron-right"
          :disable="!canGoNext"
          @click="goToNextPage"
          color="primary"
        />
      </div>

      <q-card-section
        v-if="isLoadPDF"
        class="col scroll q-pa-md flex flex-center"
      >
        <div class="pdf-viewer-wrapper shadow-5">
          <VuePDF ref="vuePDFRef" :pdf="pdfSrc" :page="page" fit-parent />
        </div>
      </q-card-section>

      <q-card-section v-else class="col flex flex-center">
        <div class="text-center">
          <q-spinner color="primary" size="4em" :thickness="10" />
        </div>
      </q-card-section>

      <q-page-sticky position="bottom-right" :offset="[20, 20]">
        <q-btn
          fab
          size="xl"
          icon="mdi-download"
          color="primary"
          @click="onDownloadFile"
          :loading="!isLoadPDF"
        >
          <q-tooltip>ดาวน์โหลดไฟล์ PDF</q-tooltip>
        </q-btn>
      </q-page-sticky>
    </q-card>
  </q-dialog>
</template>

<style scoped>
/* สไตล์เพื่อให้ PDF ดูเหมือนวางบนโต๊ะ */
.pdf-viewer-wrapper {
  background-color: white;
  width: 100%;
  max-width: 900px; /* จำกัดความกว้างเพื่อความสวยงามบนจอใหญ่ */
  transition: all 0.3s ease;
}

/* ปรับแต่ง Scrollbar ให้ดูสะอาดตา */
.scroll::-webkit-scrollbar {
  width: 8px;
}
.scroll::-webkit-scrollbar-thumb {
  background: #bdbdbd;
  border-radius: 4px;
}
.scroll::-webkit-scrollbar-thumb:hover {
  background: #9e9e9e;
}
</style>
