<script lang="ts">
  import {
    LangMeta,
    Badge,
    buildKeyOptions,
    badgeExplanation,
    groupByKey,
    filterLanguagesBasedOnBadges
  } from './utils';
  import Vega from './Vega.svelte';
  import {outputTypePi} from './charts';
  export let col: string;
  export let langMeta: LangMeta;
  export let addCallback: (x: Badge) => void;
  export let cancelCallback: (x: Badge) => void;
  export let filters: Badge[] = [];
  let showFilteredData = true;
  $: relFilters = filters.filter((x) => x.badgeType === col);
  $: currentFilters = new Set(relFilters.map((x) => x.badgeValue));
  $: options = buildKeyOptions(langMeta, new Set([col]))[col];

  $: allowedLangs = filterLanguagesBasedOnBadges(langMeta, filters);
  $: localMeta = Object.entries(langMeta)
    .filter(([lang]) => allowedLangs.has(lang))
    .map(([_, meta]) => meta);
  $: data = showFilteredData ? localMeta : Object.values(langMeta);
</script>

<div
  class="
    flex flex-col 
    justify-center  
    text-black
    border-1 border-black 
    bg-white rounded-l p-4 w-96 shadow-md
    font-normal
    hover:shadow-lg"
>
  <div class="flex flex-col">
    <h3 class="font-bold text-xs">Category</h3>
    <h1 class="">{col}</h1>
  </div>
  <div class="flex flex-col">
    <h3 class="font-bold text-xs">Description</h3>
    <h1 class="">{badgeExplanation[col]}</h1>
  </div>
  <div class="flex flex-col">
    <Vega spec={outputTypePi(groupByKey(data, col), {title: '', scheme: 'dark2'}, col)} />
    <div>
      <button
        class="text-sky-600 text-xs underline border-0"
        on:click={() => {
          showFilteredData = !showFilteredData;
        }}
      >
        show {showFilteredData ? 'all' : 'filtered'}
      </button>
    </div>
  </div>
  <div class="flex flex-col">
    <h3 class="text-xs">Filters</h3>
    <div class="max-h-36 overflow-scroll">
      {#each options.sort() as option}
        <div
          class="cursor-pointer"
          on:click={() => {
            (currentFilters.has(option) ? cancelCallback : addCallback)({
              badgeType: col,
              badgeValue: option
            });
          }}
        >
          <input type="checkbox" checked={currentFilters.has(option)} />
          {option}
        </div>
      {/each}
    </div>
    <div class="text-xs">
      <button
        class="border-0 text-sky-600 underline"
        on:click={() => {
          options.forEach((option) => addCallback({badgeType: col, badgeValue: option}));
        }}
      >
        Select all
      </button>
      <button
        class="border-0 text-sky-600 underline"
        on:click={() => {
          options.forEach((option) => cancelCallback({badgeType: col, badgeValue: option}));
        }}
      >
        Unselect all
      </button>
    </div>
  </div>
</div>