<template>
  <div class="q-py-md q-px-lg">
    <category-title :category-group="categoryGroup" :count="totalCount" />
    <category-item :category-id="categoryId" :count="categoryCount" />
  </div>
</template>

<script lang="ts">
import { Component, Inject, Vue } from 'vue-property-decorator'
import { CategoryModule } from '@/widgets/tasks/modules/CategoryModule'
import CategoryItem from '@/widgets/tasks/components/common/CategoryItem.vue'
import CategoryTitle from '@/widgets/tasks/components/common/CategoryTitle.vue'

@Component({
  components: { CategoryTitle, CategoryItem },
})
export default class CategoryHeader extends Vue {
  @Inject('CategoryModule')
  categoryModule!: CategoryModule

  get categoryGroup() {
    return this.categoryModule.currentGroup
  }

  get categoryId(): number | null {
    return this.$route.params.categoryId ? +this.$route.params.categoryId : null
  }

  get categoryCount(): number {
    return this.categoryId
      ? this.categoryModule.getCountTaskForCategory(
          this.categoryGroup,
          this.categoryId
        )
      : 0
  }

  get totalCount(): number {
    return this.categoryModule.getCountTasksForGroup(this.categoryGroup)
  }
}
</script>
