<template>
  <q-dialog
    v-on="$listeners"
    v-bind="$attrs"
    v-model="value"
    @keydown.left="back"
    @keydown.right="next"
    @hide="close"
    full-height
    full-width
    content-class="bg-image-container"
  >
    <div class="ui-image-viewer__container">
      <div class="ui-image-viewer__title">{{ currentFile.name }}</div>
      <template v-if="files.length > 1">
        <div @click="back" class="slide-btn slide-btn_back">
          <q-icon name="la la-arrow-left" color="white" size="64px" />
        </div>
        <div @click="next" class="slide-btn slide-btn_next">
          <q-icon name="la la-arrow-right" color="white" size="64px" />
        </div>
      </template>
      <div class="controls ui-gap-x-md">
        <q-btn
          type="a"
          :href="downloadUrl"
          download
          color="white"
          flat
          round
          size="xl"
        >
          <q-icon size="48px" name="la la-download" />
        </q-btn>
        <q-btn @click="close" color="white" flat round size="xl">
          <q-icon size="48px" name="la la-times" />
        </q-btn>
      </div>
      <video
        v-if="isVideo"
        preload="metadata"
        :src="currentFile.url"
        class="ui-image-viewer__video"
        controls
      />
      <img
        v-else
        :src="currentFile.url"
        :alt="currentFile.name"
        class="ui-image-viewer__image"
      />
    </div>
  </q-dialog>
</template>

<script lang="ts">
import { Component, Emit, Prop, Vue } from 'vue-property-decorator'
import FileHelper from '@/helpers/FileHelper'
import { QBtn, QDialog, QIcon } from 'quasar'

@Component({ inheritAttrs: false, components: { QDialog, QIcon, QBtn } })
export default class UiImageViewer extends Vue {
  @Prop({ type: Array, required: true })
  files!: { name: string; url: string; mime: string }[]

  @Prop({ type: Number, default: 0 })
  currentIndex!: number

  @Prop(Function)
  downloadUrlFn!: (url: string) => string

  value = false
  index = this.currentIndex

  get currentFile() {
    return this.files[this.index || 0]
  }

  get isVideo(): boolean {
    return FileHelper.isVideoByMimeType(this.currentFile.mime)
  }

  get downloadUrl() {
    return this.downloadUrlFn
      ? this.downloadUrlFn(this.currentFile.url)
      : this.currentFile.url
  }

  next() {
    if (this.index >= this.files.length - 1) {
      this.index = 0
    } else {
      this.index = this.index + 1
    }
  }

  back() {
    if (this.index <= 0) {
      this.index = this.files.length - 1
    } else {
      this.index = this.index - 1
    }
  }

  created() {
    this.value = true
  }

  @Emit()
  close() {
    return true
  }
}
</script>

<style>
.bg-image-container {
  background-color: rgba(3, 24, 48, 0.7) !important;
}

.bg-image-container .q-dialog__inner {
  overflow: auto !important;
}
</style>

<style scoped lang="sass">
.ui-image-viewer
  &__container
    box-shadow: none !important
    padding: 0 160px 0 120px
    display: flex
    flex-direction: column
    justify-content: flex-start
    align-items: center
    overflow: visible !important

  &__title
    margin-bottom: 24px
    text-align: center
    color: white
    position: sticky
    top: 0

  &__video
    max-width: 100%

  &__image
    max-width: 100%
    position: relative
    z-index: 2000

.controls
  position: fixed
  right: 0
  top: 0
  padding: 24px
  display: flex

.slide-btn
  position: fixed
  top: 0
  bottom: 0
  width: 50%
  display: flex
  align-items: center
  padding: 24px
  cursor: pointer
  opacity: 0.3
  transition: opacity 0.2s

  &:hover
    opacity: 1

  &_back
    left: 0

  &_next
    right: 0
    justify-content: flex-end
</style>
