<template>
  <media-list>
    <media-list-item
      v-for="(file, index) in files"
      @click="showFile(index)"
      :key="file.id"
      :name="file.filename"
      :mimetype="file.filetype"
      :url="file.url"
    />
  </media-list>
</template>

<script lang="ts">
import { Component, Emit, Prop, Vue } from 'vue-property-decorator'
import { Message } from '@/widgets/messages/types/Message'
import { AttachmentFile } from '@/types'
import MediaListItem from '@/widgets/base/components/message/MediaListItem.vue'
import MediaList from '@/widgets/base/components/message/MediaList.vue'

@Component({
  components: { MediaListItem, MediaList },
})
export default class MessageMediaFiles extends Vue {
  @Prop({ type: Object, required: true })
  message!: Message

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

  @Emit()
  showFile(index: number) {
    return index
  }
}
</script>
