<template>
  <div class="inline-block">
    <ui-btn
      v-on="$listeners"
      v-bind="$attrs"
      @click="onClick"
      :loading="loading"
      label="Выбрать файл"
    />

    <input
      ref="input"
      type="file"
      @change="onChange"
      :multiple="multiple"
      :accept="accept"
      class="hidden"
    />
  </div>
</template>

<script lang="ts">
import { Component, Emit, Prop, Ref, Vue } from 'vue-property-decorator'
import UiBtn from '../buttons/UiBtn.vue'

@Component({
  inheritAttrs: false,
  components: { UiBtn },
})
export default class UiFileInputBtn extends Vue {
  @Prop({ type: Boolean, default: () => false }) multiple?: boolean
  @Prop(String) accept?: string
  @Prop(Boolean) loading?: boolean

  @Ref('input') input!: HTMLInputElement

  onClick() {
    this.input.click()
  }

  onChange() {
    const files = Array.from(this.input.files ?? [])

    this.selectFiles(files)

    // Сбрасываем значение, дабы можно было два раза подряд выбрать один и тот же файл.
    // Например, после его исправления.
    if (files.length > 0) {
      this.input.value = ''
    }
  }

  @Emit() selectFiles(files: File[]) {
    return files
  }
}
</script>
