<template>
  <q-item
    v-on="$listeners"
    v-bind="$attrs"
    class="category-item ui-gap-x-sm q-pa-xs"
    dense
    :clickable="clickable"
  >
    <span class="category-item__color bg-dark" :style="style"></span>
    <span class="category-item__title">{{ title }}</span>
    <ui-badge v-if="!!category" :label="String(count)" />
  </q-item>
</template>

<style scoped lang="sass">
.category-item
  display: flex
  align-items: center

  &__color
    width: 8px
    height: 8px
    border-radius: 50%
</style>

<script lang="ts">
import { Component, Inject, Prop, Vue } from 'vue-property-decorator'
import { Category } from '@/widgets/tasks/types/Category'
import { CategoryModule } from '@/widgets/tasks/modules/CategoryModule'
import UiBadge from '@/lib-components/UiBadge.vue'
import { QItem } from 'quasar'

@Component({
  inheritAttrs: false,
  components: { UiBadge, QItem },
})
export default class CategoryItem extends Vue {
  @Inject('CategoryModule')
  categoryModule!: CategoryModule

  @Prop(Number)
  categoryId?: number

  @Prop(Boolean)
  clickable?: Category

  @Prop(Number)
  count?: Number

  get category(): Category | undefined {
    return this.categoryId
      ? this.categoryModule.getCategoryById(this.categoryId)
      : undefined
  }

  get style() {
    if (!this.category) {
      return undefined
    }

    return { background: `#${this.category.color} !important` }
  }

  get title(): string {
    return this.category ? this.category.title : 'Все задачи'
  }
}
</script>
