<template>
  <widget-bar>
    <template v-for="(btn, i) in barButtons">
      <widget-bar-separator v-if="btn === 'separator'" :key="i" />
      <widget-bar-btn
        v-else
        v-bind="btn"
        :key="btn.icon"
        :is-active="btn.to.hash === $route.hash"
      />
    </template>
  </widget-bar>
</template>

<script lang="ts">
import { Component, Inject, Prop, Vue } from 'vue-property-decorator'
import { Location } from 'vue-router'
import { MessageFilterType } from '@/widgets/messages/types/CountingMessages'
import CountingMessagesModule from '@/widgets/messages/modules/CountingMessagesModule'
import WidgetBarBtn from '@/widgets/base/components/widget-bar/WidgetBarBtn.vue'
import WidgetBar from '@/widgets/base/components/widget-bar/WidgetBar.vue'
import WidgetBarSeparator from '@/widgets/base/components/widget-bar/WidgetBarSeparator.vue'
import { hashNavRoutes } from '@/widgets/messages/router/hashRoutes'

type BarBtnProps =
  | {
      icon: string
      to: Location
      count?: number
      countColor?: string
      countTextColor?: string
    }
  | 'separator'

@Component({
  components: { WidgetBarSeparator, WidgetBarBtn, WidgetBar },
})
export default class MessagesBar extends Vue {
  @Inject('CountingMessagesModule')
  countingModule!: CountingMessagesModule

  @Prop(String)
  orderName!: string

  get barButtons() {
    const buttons: BarBtnProps[] = [
      {
        icon: 'la la-user-check',
        to: {
          hash: hashNavRoutes.index.compile({
            type: MessageFilterType.subscribedThread,
          }),
        },
      },
      {
        icon: 'la la-inbox',
        to: {
          hash: hashNavRoutes.index.compile({
            type: MessageFilterType.openedThreads,
          }),
        },
        count: this.countingModule.counting[MessageFilterType.openedThreads],
        countColor: 'negative',
        countTextColor: 'text',
      },
      {
        icon: 'la la-bookmark',
        to: {
          hash: hashNavRoutes.index.compile({
            type: MessageFilterType.favoriteThreads,
          }),
        },
        count: this.countingModule.counting[MessageFilterType.favoriteThreads],
      },
      {
        icon: 'la la-stack-overflow',
        to: {
          hash: hashNavRoutes.index.compile(),
        },
      },
      'separator',
      {
        icon: 'la la-search',
        to: {
          hash: hashNavRoutes.search.compile(),
        },
      },
      {
        icon: 'la la-plus-circle',
        to: { hash: hashNavRoutes.createThread.compile() },
      },
      ...(this.orderName
        ? [
            'separator' as const,
            {
              icon: 'la la-link',
              to: {
                hash: hashNavRoutes.orderThreads.compile({
                  orderName: this.orderName,
                }),
              },
            },
          ]
        : []),
    ]

    return buttons
  }
}
</script>
