<script lang="ts">
  import Table from '$lib/components/data-table/Table.svelte'
  import type { Column } from '$lib/components/data-table/types';
  import type { UserTodosPage } from "./+page";
  import { readTodos, readTodoCount } from '$lib/api/endpoints';
  import { getUserFromLocalstorage as getUser } from '$lib/auth/session';

  export let data: UserTodosPage;
  const user = getUser();

  const columns: Column[] = [
      {
        field: 'id',
        heading: 'ID',
        type: 'number,'
      },
      {
        field: 'title',
        heading: 'Title',
        isLink: true,
        linkTarget: '/todos/%id%',
      },
      {
        field: 'done',
        heading: 'Done',
        type: 'boolean',
      },
      {
        field: 'created',
        heading: 'Created',
        type: 'date',
      },
      {
        field: 'updated',
        heading: 'Updated',
        type: 'date',
      },
      {
        field: 'finished',
        heading: 'Finished',
        type: 'date',
      },
  ];

  const table = {
    caption: user.id === data.user.id ? 'My TODOs' : `${data.user.first_name} ${data.user.last_name}'s TODOs`,
    columns: columns,
    getItemsEndpoint: {
      callable: readTodos,
      args: [
        data.user.id
      ]
    },
    getItemCountEndpoint: {
      callable: readTodoCount,
      args: [
        data.user.id
      ]
    },
    defaultSortField: 'updated',
    defaultSortOrder: 'desc',
  };
</script>

<Table {...table} />
