<template>
  <widget-layout :is-loading="isLoading">
    <template #bar>
      <messages-bar :order-name="orderName" />
    </template>
  </widget-layout>
</template>

<script lang="ts">
import { Component, Prop, Provide } from 'vue-property-decorator'
import { getModule } from 'vuex-module-decorators'
import { ManagerModule } from '@/widgets/messages/modules/ManagerModule'
import { MessageUserModule } from '@/widgets/messages/modules/MessageUserModule'
import WidgetLayout from '@/widgets/base/components/widget-layout/WidgetLayout.vue'
import MessageModule from '@/widgets/messages/modules/MessageModule'
import CountingMessagesModule from '@/widgets/messages/modules/CountingMessagesModule'
import MessagesBar from '@/widgets/messages/components/bar/MessagesBar.vue'
import { RouteNames } from '@/widgets/messages/router/routeNames'
import { BaseWidgetLayout } from '@/widgets/base/BaseWidgetLayout'

@Component({
  components: { MessagesBar, WidgetLayout },
})
export default class MessagesLayout extends BaseWidgetLayout {
  @Prop(String)
  orderName?: string

  @Provide('MessageModule')
  messageModule: MessageModule = getModule(MessageModule, this.$store)

  @Provide('ManagerModule')
  managerModule: ManagerModule = getModule(ManagerModule, this.$store)

  @Provide('MessageUserModule')
  userModule: MessageUserModule = getModule(MessageUserModule, this.$store)

  @Provide('CountingMessagesModule')
  countingModule: CountingMessagesModule = getModule(
    CountingMessagesModule,
    this.$store
  )

  widgetName = 'messages'
  isLoading = false

  async created() {
    this.isLoading = true

    if (this.orderName) {
      this.messageModule.setOrderName(this.orderName)

      await this.$router.push({
        name: RouteNames.orderThreads,
        params: { orderName: this.orderName },
      })
    }

    await this.messageModule.initWebsocket()

    await Promise.all([
      this.userModule.loadUser(),
      this.managerModule.loadManagers(),
      this.messageModule.loadSubjects(),
      this.countingModule.loadCounting(),
    ])

    this.isLoading = false
  }
}
</script>
