<template>
  <widget-page
    @load="infinityLoad"
    :disable="isDisableInfinity"
    :is-loading="isInitialLoading"
  >
    <task-list v-if="!!tasks.length" :tasks="tasks">
      <category-header />
    </task-list>
    <widget-page-state
      @submit="toNewTaskPage"
      v-if="!isInitialLoading && !tasks.length"
      has-btn
      submit-label="Создать задачу"
      icon="la la-inbox"
      title="Задач на сегодня нет"
    />
  </widget-page>
</template>

<script lang="ts">
import { Component, Inject } from 'vue-property-decorator'
import { TaskModule } from '@/widgets/tasks/modules/TaskModule'
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'
import { LoadTasksPayload } from '@/widgets/tasks/http/dto/LoadTasksPayload'
import { CategoryModule } from '@/widgets/tasks/modules/CategoryModule'

@Component({
  components: { CategoryHeader, WidgetPageState, TaskList, WidgetPage },
})
export default class IndexPage extends BaseTasksPage {
  @Inject('TaskModule')
  taskModule!: TaskModule

  @Inject('CategoryModule')
  categoryModule!: CategoryModule

  initialPayload: LoadTasksPayload = {
    ids: [],
    dateGroup: 'today',
  }
}
</script>
