<template>
  <div class="q-pa-sm ui-gap-y-sm flex column">
    <search-messages-item
      @click="showThread(message.threadId)"
      v-for="message in messages"
      :key="message.id"
      :message="message"
    />
  </div>
</template>

<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator'
import { FoundMessage } from '@/widgets/messages/types/Message'
import SearchMessagesItem from '@/widgets/messages/components/search/SearchMessagesItem.vue'
import { hashNavRoutes } from '@/widgets/messages/router/hashRoutes'

@Component({
  components: { SearchMessagesItem },
})
export default class SearchMessages extends Vue {
  @Prop({ type: Array, required: true })
  messages!: FoundMessage[]

  showThread(threadId: number) {
    this.$router.push({
      hash: hashNavRoutes.thread.compile({ threadId: String(threadId) }),
    })
  }
}
</script>
