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

import http from "@/plugins/http";
import config from "@/app.config";
import { useCounterMixin } from "@/stores/mixin";

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

import type { PDFDocumentLoadingTask } from "pdfjs-dist/types/src/display/api";
import type { DataFile } from "@/modules/18_command/interface/index/Main";

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

const modal = defineModel<boolean>("modal", { required: true });
const command = defineModel<string>("command", { required: true });
const commandId = defineModel<string>("commandId", { required: true });
const citizenId = defineModel<string>("citizenId", { required: true });

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

const promises = ref<any>([]);
const tab = ref<string>("main"); //tab
const page = ref<number>(1);
const numOfPages = ref<number>(0); //จำนวนหน้า pdf
const pdfSrc = ref<PDFDocumentLoadingTask | undefined>(); // ตัวแปรเก็บ เเสดง pdf

const isLoadView = ref<boolean>(false);
const isUploadAttachment = ref<boolean>(false);
const dataCover = ref<DataFile>(); //ข้อมูลไฟล์คำสั่ง
const dataAttachment = ref<DataFile>(); //ข้อมูลไฟล์แบนท้าย
const currentObjectUrl = ref<string | null>(null);

/** ปิด popup */
function closeDialog() {
  modal.value = false;
  command.value = "";
  // commandId.value = "";
  // citizenId.value = "";
}

/**
 * เปลี่ยน tab
 * @param val ชื่อ tab
 */
function setTab(val: string) {
  tab.value = val;
  page.value = 1;
}

/**
 * ดึง class ตามที่ set ไว้
 */
function getClass(val: boolean) {
  return {
    "card-header-active q-px-lg q-py-md cursor-pointer": val,
    "card-header q-px-lg q-py-md cursor-pointer": !val,
  };
}

async function checkAttachment() {
  await http
    .get(config.API.commandRegister(commandId.value))
    .then(async (res) => {
      const data = res.data.result;
      isUploadAttachment.value = data.isUploadAttachment;
      if (isUploadAttachment.value) {
        promises.value.push(fetchDataCommand("attachment"));
      }
    });
}

/**
 * ฟังชั่นดาวห์โหลดไฟล์
 * @param type pdf/docx
 */
async function downloadCover(type: string) {
  // if (tab.value === "main") {
  //   window.open(dataCover.value?.downloadUrl, "_blank");
  // } else {
  //   window.open(dataAttachment.value?.downloadUrl, "_blank");
  // }

  const fileName =
    tab.value === "main"
      ? dataCover.value?.fileName
      : dataAttachment.value?.fileName;

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

/**
 * ฟังก์ชันดึงข้อมูลโหลดไฟล์คำสั่ง
 * @param type ประเภท cover เป็นคำสั่ง attachment เป็น แบนท้าย
 */
async function fetchDataCommand(type: string) {
  let newType = type === "cover" ? "คำสั่ง" : "แนบท้าย";
  const pathAPI =
    type === "cover"
      ? config.API.fileByFile(
          "ระบบออกคำสั่ง",
          newType,
          commandId.value,
          newType
        )
      : config.API.subFileByFileName(
          "ระบบออกคำสั่ง",
          newType,
          commandId.value,
          citizenId.value,
          newType
        );
  await http
    .get(pathAPI)
    .then(async (res) => {
      const data = res.data;

      if (type === "cover") {
        dataCover.value = data;
        await fetchPDF(dataCover.value);
      } else {
        dataAttachment.value = data;
      }
    })
    .catch(async (e) => {
      if (type !== "cover") {
        try {
          const res = await http.get(
            config.API.fileByFile(
              "ระบบออกคำสั่ง",
              newType,
              commandId.value,
              newType
            )
          );
          dataAttachment.value = res.data;
        } catch (error) {
          messageError($q, e);
        }
      } else {
        messageError($q, e);
      }
    })
    .finally(() => {
      hideLoader();
    });
}

/** ฟังชั่นกำหนดค่าของ PDF*/
async function fetchPDF(data: any, type: string = "docx?folder=command") {
  isLoadView.value = false;
  pdfSrc.value = undefined;
  page.value = 1;
  axios
    .get(data.downloadUrl, {
      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;
        isLoadView.value = true;
      }, 1500);
    })
    .catch((err) => {
      messageError($q, err);
      isLoadView.value = true;
    });
}

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

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

function cleanupObjectUrl() {
  if (currentObjectUrl.value) {
    URL.revokeObjectURL(currentObjectUrl.value);
    currentObjectUrl.value = null;
  }
}

watch(
  () => modal.value,
  async () => {
    if (modal.value) {
      showLoader();
      promises.value = [checkAttachment(), fetchDataCommand("cover")];
      await Promise.all(promises.value)
        .catch((e) => {
          messageError($q, e);
        })
        .finally(() => {
          hideLoader();
        });
    } else {
      cleanupObjectUrl();
      tab.value = "main";
      pdfSrc.value = undefined;
      page.value = 1;
    }
  }
);

/** check tab เมื่อมีการเปลี่ยน tab*/
watch(
  () => tab.value,
  () => {
    if (tab.value === "main") {
      fetchPDF(dataCover.value);
    }
    if (tab.value === "second") {
      fetchPDF(dataAttachment.value, "xlsx?folder=command");
    }
  }
);
</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="`คำสั่ง ${command}`" :close="closeDialog" />
      <q-separator />

      <div
        class="bg-white q-py-xs q-px-md row justify-center items-center q-gutter-sm shadow-1"
      >
        <div class="col-12 row items-center">
          <div class="space">
            <div @click="setTab('main')" :class="getClass(tab == 'main')">
              <div class="q-pr-sm">คำสั่ง</div>
            </div>

            <div
              v-if="isUploadAttachment"
              @click="setTab('second')"
              :class="getClass(tab == 'second')"
            >
              <div class="q-pr-sm">เอกสารแนบท้าย</div>
            </div>
            <q-space />
          </div>
        </div>
        <div v-if="isLoadView">
          <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>
      </div>

      <q-card-section
        v-if="isLoadView"
        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="downloadCover('pdf')"
          :loading="!isLoadView"
        >
          <q-tooltip>ดาวน์โหลดไฟล์ PDF</q-tooltip>
        </q-btn>
      </q-page-sticky>
    </q-card>
  </q-dialog>
</template>
<style scoped lang="scss">
.space {
  background-color: #e9eaec61;
  display: flex;
  z-index: 3;
  min-height: 40px;
}

.card-header-active {
  margin-top: 5px;
  margin-left: -1px;
  background-color: white;
  padding: 2px !important;
  border-radius: 10px 10px 0px 0px;
  border: 1px solid #e9eaec;
  width: 200px;
  display: flex;
  justify-content: center;
  border-bottom-style: none;
  font-weight: 600;
  align-items: center;
}

.card-header {
  margin-top: 5px;
  background-color: transparent;
  padding: 2px !important;
  border-radius: 10px 10px 0px 0px;
  width: 200px;
  display: flex;
  justify-content: center;
  font-weight: normal;
  align-items: center;
}

.card-pdf {
  border-radius: 10px;
  border: 1px solid #e9eaec;
  background-color: #e9eaec61;
}

/* สไตล์เพื่อให้ 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>
