<template>
  <widget-layout :is-loading="isLoading">
    <template #bar>
      <notifications-bar v-if="!isLoading" />
    </template>
  </widget-layout>
</template>

<script lang="ts">
import { Component, Prop, Provide, Vue } from 'vue-property-decorator'
import { getModule } from 'vuex-module-decorators'
import WidgetLayout from '@/widgets/base/components/widget-layout/WidgetLayout.vue'
import NotificationsConfigModule from '@/widgets/notifications/modules/NotificationsConfigModule'
import NotificationsModule from '@/widgets/notifications/modules/NotificationsModule'
import LocalStorageHelper from '@/widgets/notifications/helpers/LocalStorageHelper'
import NotificationsBar from '@/widgets/notifications/components/bar/NotificationsBar.vue'
import { BaseWidgetLayout } from '@/widgets/base/BaseWidgetLayout'

@Component({
  components: { NotificationsBar, WidgetLayout },
})
export default class NotificationsLayout extends BaseWidgetLayout {
  @Prop({ type: String, required: true })
  userId!: string

  @Provide('NotificationsConfigModule')
  configModule: NotificationsConfigModule = getModule(
    NotificationsConfigModule,
    this.$store
  )

  @Provide('NotificationsModule')
  notificationsModule: NotificationsModule = getModule(
    NotificationsModule,
    this.$store
  )

  isLoading = false
  widgetName = 'notifications'

  get notifications() {
    return this.notificationsModule.notifications
  }

  get isCoffeeTime() {
    return !this.notificationsModule.isLoading && !this.notifications.length
  }

  async created() {
    LocalStorageHelper.init({ clientUid: this.userId })

    this.isLoading = true

    await this.notificationsModule.initWebsocket(this.userId)
    await this.notificationsModule.loadTypesCount()

    this.isLoading = false

    this.notificationsModule.setExcludedCodes(
      LocalStorageHelper.getExcludedTypes()
    )

    const initialExcludedPopupTypes = Array.from(
      new Set([
        ...LocalStorageHelper.getExcludedPopupTypes(),
        ...LocalStorageHelper.getExcludedTypes(),
      ])
    )

    this.notificationsModule.setExcludedPopupCodes(initialExcludedPopupTypes)
  }
}
</script>
