<template>
  <widget-page
    @load="infinityLoad"
    :disable="isDisableInfinity"
    :is-loading="isInitialLoading"
  >
    <task-list v-if="tasks.length" :tasks="tasks">
      <category-header />
    </task-list>
  </widget-page>
</template>

<script lang="ts">
import { Component, Inject, Prop, Watch } from 'vue-property-decorator'
import { TaskModule } from '@/widgets/tasks/modules/TaskModule'
import { CategoryModule } from '@/widgets'
import { LoadTasksPayload } from '@/widgets/tasks/http/dto/LoadTasksPayload'
import WidgetPage from '@/widgets/base/components/widget-page/WidgetPage.vue'
import TaskList from '@/widgets/tasks/components/tasks/TaskList.vue'
import WidgetPageState from '@/widgets/base/components/widget-page/WidgetPageState.vue'
import CategoryHeader from '@/widgets/tasks/components/common/CategoryHeader.vue'
import BaseTasksPage from '@/widgets/tasks/pages/BaseTasksPage'

@Component({
  components: { CategoryHeader, WidgetPageState, TaskList, WidgetPage },
})
export default class CategoryTasksPage extends BaseTasksPage {
  @Prop(String)
  group!: string

  @Prop(String)
  categoryId!: string

  @Inject('TaskModule')
  taskModule!: TaskModule

  @Inject('CategoryModule')
  categoryModule!: CategoryModule

  get initialPayload(): LoadTasksPayload {
    return {
      ids: [],
      categoryId: this.categoryId ? parseInt(this.categoryId) : null,
      dateGroup: this.group,
    }
  }

  @Watch('group', { immediate: true })
  setGroup() {
    this.categoryModule.setCurrentGroup(this.group)
  }
}
</script>
