<template>
  <div v-on="$listeners" v-bind="$listeners" class="file-list-item">
    <q-icon size="20px" :name="iconName" color="warning" class="q-mr-sm" />
    <a
      :href="link"
      download
      class="text-primary file-list-item__link"
      :class="{ 'no-pointer-events': !link }"
    >
      {{ label }}
    </a>
    <q-btn
      v-if="isEditable"
      @click="removeFile"
      icon="la la-trash"
      dense
      size="xs"
      flat
      class="q-ml-sm file-list-item__remove"
      color="blue-grey"
    />
  </div>
</template>

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

const icons: { [key: string]: string[] } = {
  'la la-file-pdf': ['pdf'],
  'la la-file-excel': ['xlsx', 'xls'],
  'la la-file-word': ['doc', 'docx'],
  'la la-file-archive': ['rar', 'zip', '7z'],
  'la la-file-powerpoint': ['pptx', 'pptm', 'ppt'],
}

@Component({ inheritAttrs: false, components: { QIcon, QBtn } })
export default class FileListItem extends Vue {
  @Inject('IsEditable')
  isEditable!: boolean

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

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

  @Prop({ type: String })
  link!: string

  get iconName(): string {
    const extensionIcon = Object.keys(icons).find(iconName =>
      icons[iconName].includes(this.extension)
    )

    return extensionIcon || 'la la-file'
  }

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

<style scoped lang="sass">
.file-list-item
  display: flex
  align-items: center

  &__link
    text-decoration: none

  &__remove
    opacity: 0
    transition: opacity 0.2s

.file-list-item:hover
  .file-list-item__remove
    opacity: 1
</style>
