<script lang="ts">
  import Badge from "../Badge/index.svelte";
  import type { TableCellProps, TableCol, TableProps } from "../types";
  import IconButton from "../IconButton/index.svelte";
  import Spacer from "../Spacer/index.svelte";

  export let col: TableCellProps["col"];
  export let rowData: TableCellProps["rowData"];
  export let actions: TableCellProps["actions"];
  export let classNames: TableCellProps["classNames"];

  function actionClick(
    action: TableProps["actions"][number],
    item: TableProps["data"][number]
  ) {
    return () => action.handleClick(item);
  }
  $: cellValue = () => {
    const _col = col;
    let value = "-";
    if (isStringColumn()) {
      value = rowData[_col as string];
    } else if (isAdvancedColumnType()) {
      value = rowData[(_col as TableCol).name];
    }
    return value;
  };
  $: isStringColumn = () => {
    return typeof col === "string";
  };
  $: isAdvancedColumnType = () => {
    return typeof col === "object" && "name" in col;
  };
  $: isActionsColumn = () => {
    return (
      col === "actions" || (typeof col === "object" && col.name === "actions")
    );
  };
  $: displayBadge = () => {
    const _col = col as TableCol;
    if (typeof _col.badge?.shouldDisplayBadge === "function") {
      return _col.badge.shouldDisplayBadge(rowData);
    }
    return !!(_col.badge?.position || _col.badge?.badgeText);
  };
  $: badgePosition = () => {
    const _col = col as TableCol;
    return _col.badge?.position;
  };
  $: badgeText = () => {
    const _col = col as TableCol;
    return _col.badge?.badgeText || rowData[_col.name];
  };
  $: badgeLabel = () => {
    const _col = col as TableCol;
    return _col.badge?.ariaLabel;
  };
  $: badgeVariant = () => {
    const _col = col as TableCol;
    if (typeof _col.badge?.variantSelector === "function") {
      return _col.badge.variantSelector(rowData);
    }
    return _col.badge?.variant;
  };
  $: isEmptyValue = () => {
    return (
      cellValue() === undefined || cellValue() === "" || cellValue() === null
    );
  };
</script>

{#if isActionsColumn()}
  {#each actions as action, index (index)}
    <span class={classNames?.iconSpan}
      ><IconButton
        label={action.label}
        handleClick={actionClick(action, rowData)}
        icon={action.icon}
      /></span
    >
  {/each}
{/if}

{#if isStringColumn()}
  {cellValue()}
{/if}

{#if isAdvancedColumnType()}
  {#if !displayBadge()}
    {cellValue()}
  {:else}
    {#if badgePosition() === "surround"}
      <Badge
        badgeText={badgeText()}
        ariaLabel={badgeLabel()}
        variant={badgeVariant()}
      />
    {/if}

    {#if badgePosition() === "left"}
      <Badge
        badgeText={badgeText()}
        ariaLabel={badgeLabel()}
        variant={badgeVariant()}
      />

      {#if !isEmptyValue()}
        <Spacer x={2} />
      {/if}
      {cellValue()}
    {/if}

    {#if badgePosition() === "right"}
      {cellValue()}

      {#if !isEmptyValue()}
        <Spacer x={2} />
      {/if}
      <Badge
        badgeText={badgeText()}
        ariaLabel={badgeLabel()}
        variant={badgeVariant()}
      />
    {/if}
  {/if}
{/if}