<template>
  <q-btn
    v-on="$listeners"
    v-bind="$attrs"
    flat
    round
    dense
    size="21px"
    class="widget-bar-btn"
    :class="{ 'text-secondary': isActive }"
  >
    <q-badge
      v-if="!!count"
      :color="countColor"
      :text-color="countTextColor"
      floating
    >
      {{ countText }}
    </q-badge>
  </q-btn>
</template>

<style scoped lang="sass">
::v-deep
  .q-icon
    font-size: 32px
</style>

<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator'
import Formatter from '@/helpers/Formatter'
import { QBadge, QBtn } from 'quasar'

@Component({ inheritAttrs: false, components: { QBtn, QBadge } })
export default class WidgetBarBtn extends Vue {
  @Prop(Number)
  count!: number

  @Prop({ type: String, default: 'blue-grey-2' })
  countColor!: string

  @Prop({ type: String, default: 'dark' })
  countTextColor!: string

  @Prop(Boolean)
  isActive!: number

  get countText(): string {
    return Formatter.prettyCount(this.count)
  }
}
</script>
