<template>
  <file-list :is-editable="isEditable">
    <file-list-item
      v-for="(file, index) in files"
      @remove-file="removeFile(index)"
      :key="file.id"
      :extension="file.extension"
      :label="file.filename"
      :link="file.url"
    />
  </file-list>
</template>

<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator'
import { AttachmentFile } from '@/types'
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 MessageFiles extends Vue {
  @Prop(Boolean)
  isEditable!: boolean

  @Prop({ type: Array, required: true })
  files!: AttachmentFile[]

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