<script lang="ts">
  import type { Writable } from 'svelte/store';
  import SortableTr from '@components/admin/table/SortableTr.svelte';
  import SortableTh from '@components/admin/table/SortableTh.svelte';
  import type { Snippet } from 'svelte';
  import { getObjectEntryByKey } from '@util/objects.ts';

  // types
  interface Props<T> {
    data: Writable<T[]>;

    count?: boolean;
    keys: {
      key: string;
      label: string;
      width?: number;
      sortable?: boolean;
      transform?: Snippet<[T]>;
    }[];

    onClick?: (t: T) => void;
    onEdit?: (t: T) => void;
    onDelete?: (t: T) => void;
    extraActions?: Snippet<[T]>;
  }

  // input
  let { data, count, keys, onClick, onEdit, onDelete, extraActions }: Props<any> = $props();
</script>

<div class="max-h-screen overflow-x-auto">
  <table class="table table-pin-rows">
    <thead>
      <SortableTr {data}>
        {#if count}
          <SortableTh style="width: 5%">#</SortableTh>
        {/if}
        {#each keys as key (key.key)}
          <SortableTh style={key.width ? `width: ${key.width}%` : undefined} key={key.sortable ? key.key : undefined}
            >{key.label}</SortableTh
          >
        {/each}
        {#if onEdit || onDelete || extraActions}
          <SortableTh style="width: 5%"></SortableTh>
        {/if}
      </SortableTr>
    </thead>
    <tbody>
      {#each $data as d, i (d)}
        <tr class="hover:bg-base-200" onclick={() => onClick?.(d)}>
          {#if count}
            <td>{i + 1}</td>
          {/if}
          {#each keys as key (key.key)}
            <td>
              {#if key.transform}
                {@render key.transform(getObjectEntryByKey(key.key, d))}
              {:else}
                {getObjectEntryByKey(key.key, d)}
              {/if}
            </td>
          {/each}
          {#if onEdit || onDelete || extraActions}
            <td class="px-3 whitespace-nowrap">
              {#if extraActions}
                {@render extraActions(d)}
              {/if}
              {#if onEdit}
                <button class="cursor-pointer" onclick={() => onEdit(d)}>
                  <span class="iconify iconify-[heroicons--pencil-square]"></span>
                </button>
              {/if}
              {#if onDelete}
                <button class="cursor-pointer" onclick={() => onDelete(d)}>
                  <span class="iconify iconify-[heroicons--trash]"></span>
                </button>
              {/if}
            </td>
          {/if}
        </tr>
      {/each}
    </tbody>
  </table>
</div>
