<script lang="ts">
  import {badges, LangMeta, Badge, buildKeyOptions, classnames} from './utils';
  export let langMeta: LangMeta;
  export let cb: (x: Badge) => void;
  export let colOptions: string[] = [];
  export let verticalAlignment: boolean;
  // state
  let addingFilter = false;
  let badgeTypeSelect: any = false;
  let optionSelected: any = false;

  // prep layout
  $: badgeTypes = new Set(colOptions.length ? colOptions : badges);
  $: options = buildKeyOptions(langMeta, badgeTypes);
</script>

<div
  class={classnames({
    'flex items-start': !verticalAlignment,
    'flex flex-col justify-start': verticalAlignment
  })}
>
  <button
    on:click={() => {
      addingFilter = true;
    }}
    title="click this button to add a a filter"
    class="underline border-0"
  >
    Add a Filter
  </button>
  {#if addingFilter}
    <div class="flex flex-col">
      <label for="column-selection" class="text-xs font-bold">Column</label>
      <select bind:value={badgeTypeSelect} name="column-selection">
        {#each ['', ...Array.from(badgeTypes)].sort() as badge}
          <option value={badge}>{badge}</option>
        {/each}
      </select>
    </div>
  {/if}
  {#if badgeTypeSelect && addingFilter}
    <div class="flex flex-col">
      <label for="value-selection" class="text-xs font-bold">Value</label>
      <select bind:value={optionSelected} name="value-selection">
        {#each ['', ...options[badgeTypeSelect]].sort() as option}
          <option value={option}>{option}</option>
        {/each}
      </select>
    </div>
  {/if}
  {#if optionSelected && badgeTypeSelect && addingFilter}
    <button
      on:click={() => {
        cb({badgeType: badgeTypeSelect, badgeValue: optionSelected});
        badgeTypeSelect = false;
        addingFilter = false;
        optionSelected = false;
      }}
    >
      Add
    </button>
  {/if}
</div>