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

const props = withDefaults(
  defineProps<{ url: string; file: File | undefined }>(),
  {},
);

const scale = ref(1);
const page = ref(1);
const { pdf, pages } = usePDF(computed(() => props.url));
</script>

<template>
  <div class="col full-height column no-wrap">
    <div
      class="surface-0 bordered row items-center justify-evenly q-pa-sm no-wrap"
      style="height: 50px"
    >
      <q-btn
        @click="page = page > 1 ? page - 1 : page"
        class="btn-next"
        icon="mdi-chevron-left"
        unelevated
        dense
        id="btn-prev-page-top"
      />

      <div class="ellipsis">Page {{ page }} of {{ pages }}</div>

      <q-btn
        @click="scale = scale > 0.25 ? scale - 0.25 : scale"
        flat
        dense
        round
        size="12px"
        icon="mdi-magnify-minus-outline"
        class="app-text-dark"
      >
        <q-tooltip>{{ $t('zoomOut') }}</q-tooltip>
      </q-btn>
      <div>{{ scale * 100 }}%</div>

      <q-btn
        flat
        dense
        round
        size="12px"
        class="app-text-dark"
        icon="mdi-magnify-plus-outline"
        @click="scale = scale < 2 ? scale + 0.25 : scale"
      >
        <q-tooltip>{{ $t('general.zoomIn') }}</q-tooltip>
      </q-btn>

      <q-btn
        @click="page = page < pages ? page + 1 : page"
        class="btn-next"
        icon="mdi-chevron-right"
        unelevated
        dense
        id="btn-prev-page-top"
      />
    </div>

    <div
      class="flex flex-center surface-2 bordered-l bordered-r bordered-b full-height scroll"
    >
      <VuePDF
        v-if="
          url?.split('?').at(0)?.endsWith('.pdf') ||
          file?.type === 'application/pdf'
        "
        class="q-py-md"
        :pdf="pdf"
        :page="page"
        :scale="scale"
      />

      <q-img v-else class="q-py-md full-width" :src="url" />
    </div>
  </div>
</template>
