<template>
  <MainLayout :gap="false" class="main-layout">
    <template #header>
      <TopBar class="navbar" :gap="false">
        <template #left>
        </template>
        <template #center>
          <div class="file-name">{{ entry ? entry.fileName : '' }}</div>
        </template>
        <template #right>
          <Button icon="fa-solid fa-download" v-if="entry && entry.downloadFileUrl" outline tool @click="onDownload" style="margin-right: 5px;">Download</Button>
          <Button icon="fa-solid fa-xmark" @click="onClose">{{ tr('main.dialog.close') }}</Button>
        </template>
      </TopBar>
    </template>
    <template #body>
      <div class="pdf-object-container">
        <iframe :src="entry ? entry.fullFileUrl : ''" frameborder="0" scrolling="no" style="width: 100%;"></iframe>
      </div>
    </template>
  </MainLayout>
</template>

<script>

import Button from '../components/Button.vue';
import MainLayout from '../components/MainLayout.vue';
import TopBar from '../components/TopBar.vue';
import utils from '../utils.js';

export default {
  name: 'PdfViewer',
  components: {
    Button,
    MainLayout,
    TopBar
  },
  emits: [ 'close' ],
  props: {
    tr: {
      type: Function,
      default(id) { console.warn('Missing tr for PdfViewer'); return utils.translation(id); }
    }
  },
  data() {
    return {
      entry: null
    };
  },
  methods: {
    canHandle(entry) {
      return entry.mimeType === 'application/pdf';
    },
    async open(entry) {
      if (!entry || entry.isDirectory || !this.canHandle(entry)) return;

      this.entry = entry;
    },
    onClose() {
      this.$emit('close');
    },
    onDownload() {
      window.location.href = this.entry.downloadFileUrl;
    }
  }
};

</script>

<style scoped>

.pdf-object-container {
  display: flex;
  height: 100%;
  width: 100%;
}

.main-layout {
  background-color: white;
}

</style>
