<template>
  <widget-bar>
    <widget-bar-btn
      v-bind="btn.attributes"
      v-for="btn in barButtons"
      :key="btn.icon"
      :to="btn.route"
      :icon="btn.icon"
      :count="btn.count"
      :is-active="isActive(btn.route)"
    />
    <widget-bar-separator />
    <widget-bar-btn
      :to="{ name: routeNames.search }"
      :is-active="routeNames.search === $route.name"
      icon="la la-search"
    />
    <widget-bar-btn
      :to="{ name: routeNames.create }"
      :is-active="routeNames.create === $route.name"
      icon="la la-plus-circle"
    />
    <template v-if="!!orderName">
      <widget-bar-separator />
      <widget-bar-btn
        :to="orderRoute"
        :is-active="routeNames.orderThreads === $route.name"
        icon="la la-link"
      />
    </template>
  </widget-bar>
</template>

<script lang="ts">
import { Component, Inject, Prop, Vue } from 'vue-property-decorator'
import { Location } from 'vue-router'
import { RouteNames } from '@/widgets/messages/router/routeNames'
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'

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

  @Prop(String)
  orderName!: string

  isActive(route: Location): boolean {
    if (this.$route.name === route.name) {
      if (route.name === RouteNames.index) {
        return this.$route.params.type === route.params?.type
      }

      return true
    }

    return false
  }

  get routeNames() {
    return RouteNames
  }

  get orderRoute() {
    return {
      name: RouteNames.orderThreads,
      params: { orderName: this.orderName },
    }
  }

  get barButtons() {
    const buttons: {
      icon: string
      route: Location
      count?: number
      attributes?: { [key: string]: string }
    }[] = [
      {
        icon: 'la la-user-check',
        route: {
          name: RouteNames.index,
          params: { type: MessageFilterType.subscribedThread },
        },
        count: undefined,
      },
      {
        icon: 'la la-inbox',
        route: {
          name: RouteNames.index,
          params: { type: MessageFilterType.openedThreads },
        },
        count: this.countingModule.counting[MessageFilterType.openedThreads],
        attributes: {
          countColor: 'negative',
          countTextColor: 'text',
        },
      },
      {
        icon: 'la la-bookmark',
        route: {
          name: RouteNames.index,
          params: { type: MessageFilterType.favoriteThreads },
        },
        count: this.countingModule.counting[MessageFilterType.favoriteThreads],
      },
      {
        icon: 'la la-stack-overflow',
        route: { name: RouteNames.index },
        count: undefined,
      },
    ]

    return buttons
  }
}
</script>
