<template>
  <file-list is-editable>
    <file-list-item
      v-for="(file, index) in files"
      @remove-file="removeFileByIndex(index)"
      :key="file.name"
      :extension="getFileExtension(file)"
      :label="file.name"
    />
  </file-list>
</template>

<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator'
import FileListItem from '@/widgets/base/components/message/FileListItem.vue'
import FileList from '@/widgets/base/components/message/FileList.vue'

@Component({
  components: { FileListItem, FileList },
})
export default class NewMessageFiles extends Vue {
  @Prop(Array)
  files!: File[]

  getFileExtension(file: File): string {
    return file.name.split('.').pop() || ''
  }

  removeFileByIndex(index: number) {
    this.files.splice(index, 1)
  }
}
</script>
