<script context="module" lang="ts">
  type PaginatedTableProps = {
    cols: TableProps["cols"];
    data: TableProps["data"];
    actions: TableProps["actions"];
    tableProps?: Pick<TableProps, "tableCaption" | "classNames">;
    showErrorComponent: boolean;
    errorMessage: string;
    emptyStateMessage: string;
  };
</script>

<script lang="ts">
  import { getContext } from "svelte";

  import EmptyState from "../EmptyState/index.svelte";
  import Table from "./index.svelte";
  import { TableProps } from "../types";
  import PaginateContext from "../Paginate/paginate.context";
  import styles from "./index.module.css";

  export let data: PaginatedTableProps["data"];
  export let showErrorComponent: PaginatedTableProps["showErrorComponent"];
  export let errorMessage: PaginatedTableProps["errorMessage"];
  export let emptyStateMessage: PaginatedTableProps["emptyStateMessage"];
  export let cols: PaginatedTableProps["cols"];
  export let actions: PaginatedTableProps["actions"];
  export let tableProps: PaginatedTableProps["tableProps"] = undefined;

  let context = getContext(PaginateContext.key);

  $: showEmptyData = () => {
    return data.length === 0 && context.offset === 0;
  };
  $: showNoMoreResults = () => {
    return data.length === 0 && context.offset > 0;
  };
</script>

{#if !showEmptyData()}
  <div class={styles.tableContainer}>
    <Table
      {cols}
      {data}
      {actions}
      noMoreResults={showNoMoreResults()}
      {...tableProps}
    />
  </div>
{:else}
  {#if showErrorComponent}
    <EmptyState variant="error" title={errorMessage} />
  {/if}

  {#if !showErrorComponent}
    <EmptyState title={emptyStateMessage} />
  {/if}
{/if}