<template>
  <q-dialog
    v-model="isOpen"
    :maximized="$q.screen.lt.lg"
    full-width
  >
    <q-card
      class="q-pb-md full-height column no-wrap"
      style="max-width: 100%;"
    >
      <q-card-section class="row no-wrap full-height">
        <q-card-section class="column fit">
          <q-card-section class="row items-center no-wrap">
            <div class="text-h6 overflow-hidden ellipsis" v-if="!hideName">
              {{ file.name }}
            </div>
            <q-space />
            <q-btn
              v-close-popup
              icon="close"
              flat
              round
              dense
              style="margin-right: 0px !important"
            />
          </q-card-section>
          <q-card-section
            class="row col scroll no-wrap"
          >
            <slot name="left" />
            <q-card-section
              class="row col"
            >
              <q-img
                v-if="file.fileType === 'image'"
                class="centerImage fit"
                :src="file.contentUrl ?? ''"
                fit="scale-down"
              />
              <VuePdfEmbed
                v-if="file.fileType === 'pdf'"
                :source="file.contentUrl ?? ''"
                style="height: 100%; width: 100%;"
              />
              <q-video
                v-if="file.fileType === 'video'"
                :src="file.contentUrl ?? ''"
                style="height: 100%; width: 100%;"
              />
            </q-card-section>
            <slot name="right" />
          </q-card-section>
          <q-card-section class="row" v-if="!hideDownload">
            <q-item-section>
              <div
                class="row full-width justify-end"
              >
                <q-btn
                  :label="$t('downloadFile')"
                  outline
                  color="k-accent"
                  icon="cloud_download"
                  class="q-pa-md q-pl-none"
                  style="margin-right: 0px !important"
                  @click="
                    saveAs(file.contentUrl ?? '', file.name)"
                />
              </div>
            </q-item-section>
          </q-card-section>
        </q-card-section>
      </q-card-section>
    </q-card>
  </q-dialog>
</template>

<script setup lang="ts">
import VuePdfEmbed from 'vue-pdf-embed'
import { saveAs } from 'file-saver'
import { KFileViewerProps } from './types'

const { file, hideDownload = false, hideName = false } = defineProps<KFileViewerProps>()

const isOpen = defineModel<boolean>()

</script>
<style>

@media (min-width: 600px) {
  .q-dialog__inner--minimized > div {
      max-width: none;
  }
}
.centerImage img{
  object-fit: scale-down !important;
}</style>
