<template>
  <ui-btn rounded size="sm" :label="btnLabel">
    <ui-notifications-filter-menu />
  </ui-btn>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'
import UiBtn from '../../../../lib-components/buttons/UiBtn.vue'
import UiNotificationsFilterMenu from './UiNotificationsFilterMenu.vue'
import NotificationsStore, {
  getNotificationsStore,
} from '../stores/NotificationsStore'

@Component({
  inheritAttrs: false,
  components: { UiNotificationsFilterMenu, UiBtn },
})
export default class UiNotificationsFilterBtn extends Vue {
  notificationStore!: NotificationsStore

  created() {
    this.notificationStore = getNotificationsStore(this.$store)
  }

  get currentType(): string | null {
    return this.notificationStore.currentType
  }

  get btnLabel(): string {
    if (this.currentType === null) {
      return `Всего ${this.notificationStore.allNotificationsCount}`
    }

    return `${this.currentType} ${this.notificationStore.currentTypeNotificationCount}`
  }
}
</script>
