<template>
  <widget-page disable>
    <threads v-if="threads.length" :threads="threads" :dense="false" />
    <ui-page-loading :showing="isLoading" />
  </widget-page>
</template>

<script lang="ts">
import { Component, Inject, Prop, Vue } from 'vue-property-decorator'
import WidgetPage from '@/widgets/base/components/widget-page/WidgetPage.vue'
import Threads from '@/widgets/messages/components/Threads.vue'
import WidgetPageState from '@/widgets/base/components/widget-page/WidgetPageState.vue'
import UiPageLoading from '@/lib-components/UiPageLoading.vue'
import ThreadService from '@/widgets/messages/services/ThreadService'
import MessageModule from '@/widgets/messages/modules/MessageModule'

@Component({
  components: { UiPageLoading, WidgetPageState, Threads, WidgetPage },
})
export default class ThreadPage extends Vue {
  @Inject('MessageModule')
  messageModule!: MessageModule

  @Prop()
  threadId!: string

  isLoading = false

  get threads() {
    return this.messageModule.threads
  }

  loadThread() {
    this.isLoading = true

    ThreadService.getThreadById(parseInt(this.threadId))
      .then(thread => this.messageModule.setThreads([thread]))
      .finally(() => (this.isLoading = false))
  }

  activated() {
    this.loadThread()
  }
}
</script>
