<template>
  <ui-menu v-on="$listeners" v-bind="$attrs">
    <ui-menu-group>
      <ui-menu-item
        @click="currentType = null"
        :active="currentType === null"
        v-close-popup
      >
        Все
        <template slot="after">
          <q-item-section side>
            <q-item-label>{{ allNotificationsCount }}</q-item-label>
          </q-item-section>
        </template>
      </ui-menu-item>
      <ui-menu-item
        v-for="type in allowedTypes"
        @click="currentType = type"
        v-close-popup
        :key="type"
        :active="type === currentType"
      >
        {{ type }}
        <template slot="after">
          <q-item-section side>
            <q-item-label>{{ typesCount[type] }}</q-item-label>
          </q-item-section>
        </template>
      </ui-menu-item>
    </ui-menu-group>
  </ui-menu>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'
import UiMenu from '../../../../lib-components/menu/UiMenu.vue'
import UiMenuGroup from '../../../../lib-components/menu/UiMenuGroup.vue'
import UiMenuItem from '../../../../lib-components/menu/UiMenuItem.vue'
import NotificationsStore, {
  getNotificationsStore,
} from '../../../../lib-components/composite/notifications/stores/NotificationsStore'
import { TypesCount } from '../types/TypesCount'
import { QItemLabel, QItemSection } from 'quasar'

@Component({
  inheritAttrs: false,
  components: { UiMenuItem, UiMenuGroup, UiMenu, QItemSection, QItemLabel },
})
export default class UiNotificationsFilterMenu extends Vue {
  notificationStore!: NotificationsStore

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

  get allowedTypes(): string[] {
    return this.notificationStore.allowedTypes
  }

  get typesCount(): TypesCount {
    return this.notificationStore.typesCount
  }

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

  set currentType(type: string | null) {
    this.notificationStore.setCurrentType(type)
    this.notificationStore.loadNotifications()
  }

  get allNotificationsCount(): number {
    return this.notificationStore.allNotificationsCount
  }
}
</script>
