<script>
  import { _, json } from "svelte-i18n";
  import TracksEmptyState from "./TracksEmptyState.svelte";
  import store from "../store.js";
  import { TrackService } from "@odit/lfk-client-js";
  let tracks_promise = TrackService.trackControllerGetAll();
  //
  import { getlang } from "./datatable_i18n";
  import { Grid } from "gridjs";
  import "gridjs/dist/theme/mermaid.css";
  //
  let table;
  tracks_promise.then((data) => {
    let tabledata = [];
    data.forEach((track) => {
      tabledata.push([track.name, track.distance, "blablub"]);
    });
    console.log(tabledata);
    // console.log(data);
    const datatable = new Grid({
      columns: ["Name", "Track Length in m", "Action"],
      language: getlang($json("datatable")),
      sort: true,
      search: { enabled: true },
      data: tabledata,
      pagination: {
        enabled: true,
        limit: 25,
        summary: false,
      },
    });
    setTimeout(() => {
      datatable.render(table);
    }, 150);
    table_visible = true;
  });
  let table_visible = false;
</script>

{#if table_visible}
  <div bind:this={table} />
{/if}
{#await tracks_promise}
  <div
    class="bg-teal-lightest border-t-4 border-teal rounded-b text-teal-darkest px-4 py-3 shadow-md my-2"
    role="alert">
    <p class="font-bold">track data is being loaded...</p>
    <p class="text-sm">This might take a moment 👀</p>
  </div>
{:then tracks}
  {#if tracks.length > 0}
    <h4>{tracks.length}</h4>
    <hr />
    <ul>
      {#each tracks as item}
        <li>{item.name}</li>
        <li>{item.distance}</li>
      {/each}
    </ul>
  {:else}
    <TracksEmptyState />
  {/if}
{:catch error}
  <div class="text-white px-6 py-4 border-0 rounded relative mb-4 bg-red-500">
    <span class="inline-block align-middle mr-8">
      <b class="capitalize">{$_('general_promise_error')}</b>
      {error}
    </span>
  </div>
{/await}
