<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';

  export let data: UserTodosPage;

  const columns: Column[] = [
      {
        field: "id",
        heading: "ID",
      },
      {
        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: `List of TODOs for user ${data.user.first_name} ${data.user.last_name}`,
    columns: columns,
    getItemsEndpoint: {
      callable: readTodos,
      args: [
        data.user.id
      ]
    },
    getItemCountEndpoint: {
      callable: readTodoCount,
      args: [
        data.user.id
      ]
    }
  };
</script>

<Table {...table} />
