import { Component, Watch, Vue } from 'vue-property-decorator';
import get from 'lodash/get';
import { convertDateFromBackendFormat } from '@utils/format-date';
import { WorkflowServiceApi, UserTaskListItem } from '@openapi/wf';

const wfApi = new WorkflowServiceApi();

@Component({})
export default class Tasks extends Vue {
  private sortByDefault = 'modified';

  list: UserTaskListItem[] = [];

  get count(): number {
    return this.$store.getters['wf/userTasks/count'];
  }

  private model = {
    loading: false,
    visibleColumns: ['task.title', 'process.title', 'task.createDate'],
    pagination: {
      descending:
        this.$route.query.descending === undefined
          ? true
          : this.$route.query.descending === 'true',
      rowsPerPage: this.$route.query.rowsPerPage
        ? Number(this.$route.query.rowsPerPage)
        : 10,
      sortBy: this.$route.query.sortBy
        ? this.$route.query.sortBy
        : this.sortByDefault,
      rowsNumber: 0,
      page: this.$route.query.page ? Number(this.$route.query.page) : 1,
    },
  };

  @Watch('count', {
    immediate: true,
  })
  countHandler(val: number): void {
    this.model.pagination.rowsNumber = val;
  }

  private get columns(): any[] {
    return [
      {
        field: 'id',
        label: this.$t('task.id'),
        name: 'id',
      },
      {
        align: 'left',
        field: (val: any) => val,
        format: (val: any) => this.$t(val.userTask.title),
        handler: (val: any) => {
          this.$router.push({
            name: 'stepper',
            params: {
              traceId: val.process.traceId,
            },
            query: {
              taskId: val.userTask.taskId,
            },
          });
        },
        icon: 'work_outline',
        label: this.$t('task.title'),
        name: 'task.title',
        required: true,
      },
      {
        align: 'left',
        field: (val: any) => val,
        format: (val: any) => this.$t(val.process.title),
        icon: 'work_outline',
        label: this.$t('task.process'),
        name: 'process.title',
      },
      {
        align: 'right',
        field: (val: any) => val.userTask.createDate,
        format: (val: any) => convertDateFromBackendFormat(val),
        label: this.$t('task.dateCreated'),
        name: 'task.createDate',
      },
    ];
  }

  private created(): void {
    this.init();
  }

  private async init(val?: any): Promise<void> {
    this.model.loading = true;

    if (
      get(
        {
          val,
        },
        'val.pagination'
      )
    ) {
      this.model.pagination.descending = val.pagination.descending;
      this.model.pagination.page = val.pagination.page;
      this.model.pagination.rowsPerPage = val.pagination.rowsPerPage;
      this.model.pagination.sortBy =
        val.pagination.sortBy === null
          ? this.sortByDefault
          : val.pagination.sortBy;
    }

    const {
      data: { tasks: list = [], totalCount },
    } = await wfApi.taskList(
      undefined,
      this.model.pagination.page.toString(),
      this.model.pagination.rowsPerPage.toString()
    );
    this.model.loading = false;
    if (totalCount) this.model.pagination.rowsNumber = totalCount;
    this.list = list;
  }
}
