<script>
  export let table;
  export let selected;
</script>

<div class="flex items-center gap-2">
  <button
    class="border rounded p-1"
    on:click={() => $table.setPageIndex(0)}
    disabled={!$table.getCanPreviousPage()}
  >
    {"<<"}
  </button>
  <button
    class="border rounded p-1"
    on:click={() => $table.previousPage()}
    disabled={!$table.getCanPreviousPage()}
  >
    {"<"}
  </button>
  <button
    class="border rounded p-1"
    on:click={() => $table.nextPage()}
    disabled={!$table.getCanNextPage()}
  >
    {">"}
  </button>
  <button
    class="border rounded p-1"
    on:click={() => $table.setPageIndex($table.getPageCount() - 1)}
    disabled={!$table.getCanNextPage()}
  >
    {">>"}
  </button>
  <span class="flex items-center gap-1">
    <div>Page</div>
    <strong>
      {$table.getState().pagination.pageIndex + 1} of{" "}
      {$table.getPageCount()}
    </strong>
  </span>
  <span class="flex items-center gap-1">
    | Go to page:
    <input
      type="number"
      defaultValue={$table.getState().pagination.pageIndex + 1}
      on:change={(e) => {
        const page = e.target.value ? Number(e.target.value) - 1 : 0;
        $table.setPageIndex(page);
      }}
      class="border p-1 rounded w-16"
    />
  </span>
  <select
    value={$table.getState().pagination.pageSize}
    on:input={(e) => {
      const ps = Number(e.target.value);
      console.log({ ps });
      $table.setPageSize(Number(e.target.value));
    }}
  >
    {#each [25, 50, 100, 250, 500] as pageSize}
      <option value={pageSize}>{pageSize}</option>
    {/each}
  </select>
</div>
<!-- <pre>{JSON.stringify($table.getState(), null, 2)}</pre> -->
<div>
  {Object.keys(selected).length} of{" "}
  {$table.getPreFilteredRowModel().rows.length} Total Rows Selected
</div>
