<script>
  import DataTable from "$/client/components/DataTable.svelte";
  import Icon from "$/client/components/Icon.svelte";
  import { link } from 'svelte-spa-router';
  import { log } from "$/client/logging.js";
  import { onMount } from "svelte";

  let rows = [
    {_url: "/", id: 1, name: "Zed", age: 100, eyes: "Blue", hair: "Bald"},
    {_url: "/", id: 2, name: "Zed", age: 100, eyes: "Blue", hair: "Bald"},
    {_url: "/", id: 3, name: "Zed", age: 100, eyes: "Blue", hair: "Bald"},
    {_url: "/", id: 4, name: "Zed", age: 100, eyes: "Blue", hair: "Bald"},
    {_url: "/", id: 5, name: "Zed", age: 100, eyes: "Blue", hair: "Bald"},
    {_url: "/", id: 7, name: "Zed", age: 100, eyes: "Blue", hair: "Bald"},
    {_url: "/", id: 7, name: "Zed", age: 100, eyes: "Blue", hair: "Bald"},
    {_url: "/", id: 8, name: "Zed", age: 100, eyes: "Blue", hair: "Bald"},
    {_url: "/", id: 9, name: "Zed", age: 100, eyes: "Blue", hair: "Bald"},
    {_url: "/", id: 10, name: "Zed", age: 100, eyes: "Blue", hair: "Bald"},
    {_url: "/", id: 11, name: "Zed", age: 100, eyes: "Blue", hair: "Bald"},
    {_url: "/", id: 12, name: "Zed", age: 100, eyes: "Blue", hair: "Bald"},
    {_url: "/", id: 13, name: "Zed", age: 100, eyes: "Blue", hair: "Bald"},
    {_url: "/", id: 14, name: "Zed", age: 100, eyes: "Blue", hair: "Bald"},
    {_url: "/", id: 15, name: "Zed", age: 100, eyes: "Blue", hair: "Bald"},
    {_url: "/", id: 16, name: "Zed", age: 100, eyes: "Blue", hair: "Bald"},
    {_url: "/", id: 17, name: "Zed", age: 100, eyes: "Blue", hair: "Bald"},
    {_url: "/", id: 18, name: "Zed", age: 100, eyes: "Blue", hair: "Bald"},
    {_url: "/", id: 19, name: "Zed", age: 100, eyes: "Blue", hair: "Bald"},
    {_url: "/", id: 20, name: "Zed", age: 100, eyes: "Blue", hair: "Bald"},
    {_url: "/", id: 21, name: "Zed", age: 100, eyes: "Blue", hair: "Bald"},
  ];

  let column_names = Object.keys(rows[0]);

  let pagination =  { currentPage: 1, lastPage: 1 }

  const full_query = async (event) => {
    log.debug("QUERY", event.detail);
  }

  const search_query = async (event) => {
    let search_text = event.detail;

    log.debug("SEARCH", search_text);
  }

  const clear_search = async (event) => {
    log.debug("CLEAR", event.detail);
  }

  const cell_click = (event) => {
    log.debug("CELL", event.detail);
  }

  onMount(async () => {
    await full_query();
  });
</script>


<DataTable rows={ rows }
           columns={ column_names }
           bind:pagination
           on:full_query={ full_query }
           on:search_query={ search_query }
           on:clear_search={ clear_search }
           on:cell_click={ cell_click }>

      <a href="/admin/table/" use:link><Icon name="arrow-left" size="36" /></a>
      <a href="/admin/table/create/table/" use:link><Icon name="file-plus" size="36" /></a>

</DataTable>
