import { Component, Inject, Vue } from 'vue-property-decorator'
import { RouteNames } from '@/widgets/messages/router/routeNames'
import { MessageThread } from '@/widgets/messages/types/MessageThread'
import { GetThreadsPayload } from '@/widgets/messages/services/ThreadService'
import MessageModule from '@/widgets/messages/modules/MessageModule'

@Component
export default class BaseThreadsPage extends Vue {
  @Inject('MessageModule')
  messageModule!: MessageModule

  isInitialLoading = false

  get initialPayload(): GetThreadsPayload | null {
    return null
  }

  get threads(): MessageThread[] {
    return this.messageModule.threads
  }

  async infinityLoad(index: number, done: Function) {
    const threads = await this.messageModule.infinityLoadThreads(
      this.initialPayload as GetThreadsPayload
    )

    done(threads.length === 0)
  }

  get isDisableInfinity() {
    return this.isInitialLoading
  }

  initialLoad() {
    this.isInitialLoading = true

    return this.messageModule
      .loadThreads(this.initialPayload || undefined)
      .finally(() => (this.isInitialLoading = false))
  }

  toCreateRoute() {
    this.$router.push({ name: RouteNames.create })
  }

  toIndexRoute() {
    this.$router.push({ name: RouteNames.index })
  }
}
