<template>
  <div v-if="!!totalCount">
    <category-title :category-group="categoryGroup" :count="totalCount" />
    <q-list class="q-mt-md">
      <category-item :to="getCategoryRoute(null)" clickable />
      <category-item
        v-for="categoryCounting in counting"
        :to="getCategoryRoute(categoryCounting.id)"
        :key="categoryCounting.id"
        :category-id="categoryCounting.id"
        :count="categoryCounting.taskCount"
        clickable
      />
    </q-list>
  </div>
</template>

<script lang="ts">
import { Component, Inject, Prop, Vue } from 'vue-property-decorator'
import { CategoryCounting, CategoryGroup } from '@/widgets/tasks/types/Category'
import { RouteNames } from '@/widgets/tasks/router/routeNames'
import { CategoryModule } from '@/widgets/tasks/modules/CategoryModule'
import CategoryTitle from '@/widgets/tasks/components/common/CategoryTitle.vue'
import CategoryItem from '@/widgets/tasks/components/common/CategoryItem.vue'
import { QList } from 'quasar'

@Component({
  components: { CategoryItem, CategoryTitle, QList },
})
export default class CategoriesGroup extends Vue {
  @Prop({ type: Number, required: true })
  totalCount!: number

  @Prop({ type: String, required: true })
  categoryGroup!: CategoryGroup

  @Prop({ type: Array, required: true })
  counting!: CategoryCounting[]

  @Inject('CategoryModule')
  categoryModule!: CategoryModule

  getCategoryRoute(categoryId: number) {
    return {
      name: RouteNames.categoryTasks,
      params: {
        categoryId: categoryId ? categoryId.toString() : null,
        group: this.categoryGroup,
      },
    }
  }
}
</script>
