<template>
  <div v-on="$listeners" v-bind="$attrs" class="media-list-item" :style="style">
    <video v-if="isVideo" :src="url" preload="metadata"></video>
    <img v-else :src="url" alt="" />
    <div class="media-list-item__hover">
      <q-icon :name="hoverIcon" color="white" size="64px" />
    </div>
  </div>
</template>

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

@Component({ inheritAttrs: false, components: { QIcon } })
export default class MediaListItem extends Vue {
  @Prop({ type: String, required: true })
  name!: string

  @Prop({ type: String, required: true })
  url!: string

  @Prop({ type: String, required: true })
  mimetype!: string

  @Prop(Boolean)
  editable!: boolean

  get isImage(): boolean {
    return FileHelper.isImageByMimeType(this.mimetype)
  }

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

  get style() {
    return this.isImage
      ? { 'background-image': `url(${'https://messages.loc:8888' + this.url})` }
      : undefined
  }

  get hoverIcon(): string {
    return this.isImage ? 'la la-search-plus' : 'la la-play'
  }
}
</script>

<style scoped lang="sass">
.media-list-item
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.2)
  border-radius: 4px
  position: relative
  background-color: #fff
  display: flex
  justify-content: center
  align-items: center
  height: 128px
  width: 128px
  cursor: pointer
  background-size: cover
  background-position: top center

  img,
  video
    max-width: 100%
    max-height: 100%

  &__hover
    position: absolute
    top: 0
    right: 0
    left: 0
    bottom: 0
    opacity: 0
    transition: opacity 0.2s
    display: flex
    justify-content: center
    align-items: center
    background-color: rgba(0, 0, 0, 0.4)
    border-radius: 4px

    &:hover
      opacity: 1
</style>
