<script setup>
import PDF from "pdf-vue3";
import { uid } from "uid";
import printJS from "print-js";
import { ref, computed } from "vue";
import { useAlert } from "../../composables/alert";
const props = defineProps({
  base64String: { type: String, required: false, default: "" },
  title: { type: String, required: false, default: "" },
  fileName: { type: String, required: false, default: "" },
  disabled: { type: Boolean, required: false, default: false },
  isPrint: { type: Boolean, required: false, default: false },
  showBackToTopBtn: { type: Boolean, required: false, default: false }
});
const emit = defineEmits(["closeDialog"]);
const base64 = ref(props.base64String);
const alert = useAlert();
const generateUniqueId = () => {
  const uniqueId = uid();
  return props.fileName ? `${props.fileName}` : uniqueId;
};
const downloadPdf = () => {
  try {
    if (!props.base64String) alert?.addAlert({ message: "No Base64 provided", alertType: "error" });
    const byteString = atob(props.base64String || "");
    const byteArray = new Uint8Array(byteString.length);
    for (let i = 0; i < byteString.length; i++) {
      byteArray[i] = byteString.charCodeAt(i);
    }
    const blob = new Blob([byteArray], { type: "application/pdf" });
    const link = URL.createObjectURL(blob);
    const anchorElement = document.createElement("a");
    anchorElement.style.display = "none";
    anchorElement.href = link;
    anchorElement.download = `${generateUniqueId()}.pdf`;
    document.body.appendChild(anchorElement);
    anchorElement.click();
    URL.revokeObjectURL(link);
    document.body.removeChild(anchorElement);
    base64.value = "";
    alert?.addAlert({ message: "Download success", alertType: "success" });
  } catch (error) {
    alert?.addAlert({ message: `Download unsuccess : ${error}`, alertType: "error" });
  }
};
const printPdf = () => {
  printJS({
    printable: props.base64String,
    type: "pdf",
    base64: true,
    onPrintDialogClose: endLoadPdf,
    onError: (error) => {
      alert?.addAlert({ message: error, alertType: "error" });
    }
  });
  base64.value = "";
};
const endLoadPdf = () => {
  emit("closeDialog", false);
  base64.value = "";
};
const isMobile = () => {
  return /Android|Mobi|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini|Macintosh/i.test(navigator.userAgent);
};
const checkMobileAndPrint = computed(() => {
  return !isMobile() && props.isPrint;
});
const setWidthPdf = computed(() => {
  if (isMobile()) {
    return "100%";
  } else {
    return "100dvh";
  }
});
</script>

<template>
  <v-card>
    <v-toolbar density="compact">
      <v-toolbar-title>{{ props.title }}</v-toolbar-title>
      <v-spacer />
      <v-btn
        v-if="checkMobileAndPrint"
        icon="mdi mdi-printer"
        variant="plain"
        @click="printPdf"
      />
      <v-btn
        v-if="!props.disabled"
        icon="mdi mdi-download"
        variant="plain"
        @click="downloadPdf"
      />
      <v-btn
        icon="mdi mdi-close"
        variant="plain"
        @click="endLoadPdf"
      />
    </v-toolbar>
    <v-card-text class="justify-center h-screen">
      <PDF
        v-bind="$attrs"
        :pdf-width="setWidthPdf"
        :src="base64"
        :show-back-to-top-btn="props.showBackToTopBtn"
      />
    </v-card-text>
  </v-card>
</template>
