<template>
  <widget-bar>
    <widget-bar-btn
      v-for="filter in filters"
      :to="getFilterRoute(filter)"
      :key="filter.icon"
      :icon="filter.icon"
      :count="filter.count"
      :is-active="filter.isActive"
    />
    <widget-bar-separator />
    <widget-bar-btn
      key="config"
      :to="configRoute"
      :is-active="configRoute.name === $route.name"
      icon="la la-cog"
    />
    <clear-all-notifications-btn
      v-if="this.notificationsModule.totalCount > 0"
      key="delete"
    />
  </widget-bar>
</template>

<script lang="ts">
import { Component, Inject, Vue } from 'vue-property-decorator'
import { NotificationCode } from '@/widgets/notifications/types/NotificationEvent'
import { NotificationsModule } from '@/widgets'
import { RouteNames } from '@/widgets/notifications/router/routeNames'
import WidgetBar from '@/widgets/base/components/widget-bar/WidgetBar.vue'
import WidgetBarSeparator from '@/widgets/base/components/widget-bar/WidgetBarSeparator.vue'
import WidgetBarBtn from '@/widgets/base/components/widget-bar/WidgetBarBtn.vue'
import CodeIconsHelper from '@/widgets/notifications/helpers/CodeIconsHelper'
import ClearAllNotificationsBtn from '@/widgets/notifications/components/bar/ClearAllNotificationsBtn.vue'

type Filter = {
  codes: NotificationCode[]
  icon: string
  count: number
  isActive?: boolean
  hide?: boolean
}

@Component({
  components: {
    ClearAllNotificationsBtn,
    WidgetBarBtn,
    WidgetBarSeparator,
    WidgetBar,
  },
})
export default class NotificationsBar extends Vue {
  @Inject('NotificationsModule')
  notificationsModule!: NotificationsModule

  getFilterRoute(filter: Filter) {
    return { name: RouteNames.index, query: { codes: filter.codes } }
  }

  get configRoute() {
    return { name: RouteNames.config }
  }

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

  get codesFromRoute(): NotificationCode[] {
    const routeCodes = this.$route.query.codes

    if (Array.isArray(routeCodes)) {
      return routeCodes as NotificationCode[]
    }

    return routeCodes ? [routeCodes as NotificationCode] : []
  }

  get filters(): Filter[] {
    const taskCodes = [
      NotificationCode.taskComplete,
      NotificationCode.newTask,
      NotificationCode.scheduledTask,
    ]

    const tasksNotificationsCount = taskCodes.reduce(
      (totalCount, code) =>
        totalCount + this.notificationsModule.getCountByCode(code),
      0
    )

    const enableTasksNotifications: boolean = taskCodes.some(code =>
      this.excludedCodes.includes(code)
    )

    return [
      {
        icon: 'la la-stack-overflow',
        codes: [],
        count: this.notificationsModule.totalCount,
        isActive:
          !this.codesFromRoute.length && this.$route.name === RouteNames.index,
      },
      {
        icon: CodeIconsHelper.getIcon(NotificationCode.newOrder),
        codes: [NotificationCode.newOrder],
        count: this.notificationsModule.getCountByCode(
          NotificationCode.newOrder
        ),
        hide:
          this.notificationsModule.excludedCodes.includes(
            NotificationCode.newOrder
          ) || !this.notificationsModule.typesCount.newOrder?.count,
        isActive: this.codesFromRoute.includes(NotificationCode.newOrder),
      },
      {
        icon: CodeIconsHelper.getIcon(NotificationCode.newPayment),
        codes: [NotificationCode.newPayment],
        count: this.notificationsModule.getCountByCode(
          NotificationCode.newPayment
        ),
        hide:
          this.excludedCodes.includes(NotificationCode.newPayment) ||
          !this.notificationsModule.typesCount.newPayment?.count,
        isActive: this.codesFromRoute.includes(NotificationCode.newPayment),
      },
      {
        icon: CodeIconsHelper.getIcon(NotificationCode.newTask),
        codes: taskCodes,
        count: tasksNotificationsCount,
        hide: !tasksNotificationsCount || !enableTasksNotifications,
        isActive: this.codesFromRoute.some(code => taskCodes.includes(code)),
      },
      {
        icon: CodeIconsHelper.getIcon(NotificationCode.newMessage),
        codes: [NotificationCode.newMessage],
        count: this.notificationsModule.getCountByCode(
          NotificationCode.newMessage
        ),
        hide:
          this.excludedCodes.includes(NotificationCode.newMessage) ||
          !this.notificationsModule.typesCount.newMessage?.count,
        isActive: this.codesFromRoute.includes(NotificationCode.newMessage),
      },
      {
        icon: CodeIconsHelper.getIcon(NotificationCode.other),
        codes: [NotificationCode.other],
        count: this.notificationsModule.getCountByCode(NotificationCode.other),
        hide: !this.notificationsModule.typesCount.other?.count,
        isActive: this.codesFromRoute.includes(NotificationCode.other),
      },
    ].filter(item => !item.hide)
  }
}
</script>
