<template>
  <div class="flex items-center q-mb-sm q-mx-sm">
    <ui-notifications-filter-btn
      v-if="!isShowConfig && !isEmpty && !isLoading"
    />
    <div class="q-gutter-x-xs q-ml-auto">
      <ui-notifications-sound-btn />
      <ui-notifications-config-btn
        @click="isShowConfig = !isShowConfig"
        :is-show-config="isShowConfig"
      />
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator'
import UiNotificationsSoundBtn from '../header/UiNotificationsSoundBtn.vue'
import UiNotificationsConfigBtn from '../config/UiNotificationsConfigBtn.vue'
import UiBtn from '../../../buttons/UiBtn.vue'
import UiNotificationsFilterBtn from '../filter/UiNotificationsFilterBtn.vue'
import NotificationsConfigStore, {
  getNotificationsConfigStore,
} from '../stores/NotificationsConfigStore'

@Component({
  components: {
    UiNotificationsFilterBtn,
    UiBtn,
    UiNotificationsConfigBtn,
    UiNotificationsSoundBtn,
  },
  inheritAttrs: false,
})
export default class UiNotificationsHeader extends Vue {
  @Prop(Boolean) isEmpty!: boolean
  @Prop(Boolean) isLoading!: boolean

  notificationConfigStore!: NotificationsConfigStore

  created() {
    this.notificationConfigStore = getNotificationsConfigStore(this.$store)
  }

  get isShowConfig(): boolean {
    return this.notificationConfigStore.isShowConfig
  }

  set isShowConfig(value: boolean) {
    this.notificationConfigStore.setIsShowConfig(value)
  }
}
</script>
