<script lang="ts">
  import {badgeExplanation, tableShortNames, badges} from './utils';
  import Tooltip from './Tooltip.svelte';
  export let badgeType: string;
  export let badgeValue: string;
  export let showNegativeBooleans = false;
  export let cancelCallbak: any = false;

  const colors = [
    'bg-amber-500',
    'bg-blue-500',
    'bg-cyan-500',
    'bg-emerald-500',
    'bg-fuchsia-500',
    'bg-gray-500',
    'bg-green-500',
    'bg-indigo-500',
    'bg-lime-500',
    'bg-orange-500',
    'bg-pink-500',
    'bg-purple-500',
    'bg-red-500',
    'bg-rose-500',
    'bg-sky-500',
    'bg-slate-500',
    'bg-stone-500',
    'bg-teal-500',
    'bg-violet-500',
    'bg-yellow-500',
    'bg-zinc-500'
  ];

  const badgeColor = badges.reduce((acc, row, idx) => {
    acc[row] = colors[idx % colors.length];
    return acc;
  }, {});
  if (!badgeColor[badgeType]) {
  } else {
    console.log(badgeColor[badgeType], badgeType);
  }

  const binaryCases = new Set([
    'Formal Definition Available',
    'Extensible',
    'Alt API Available',
    'Abstraction Mechanism',
    'Provides Accessibility',
    'Open Source',
    'Annotation Support'
  ]);

  $: msg = prepMsg(badgeValue, badgeType, showNegativeBooleans);

  function prepMsg(badgeValue, badgeType, showNegativeBooleans) {
    if (!binaryCases.has(badgeType)) {
      return badgeValue;
    }
    if (showNegativeBooleans) {
      return `${badgeType} - ${badgeValue}`;
    }
    return badgeValue === 'Yes' ? tableShortNames[badgeType] || badgeType : '';
  }
</script>

{#if msg.length && msg !== 'Unknown'}
  <div
    class={`text-xs px-2 py-1 rounded font-bold ${
      badgeColor[badgeType] || 'bg-neutral-600'
    } text-white mr-1 mt-1 has-tooltip relative`}
  >
    <Tooltip>
      <span slot="content">{badgeExplanation[badgeType]}</span>

      <span slot="target">
        {#if !binaryCases.has(badgeType)}
          <div class={'text-2xs'}>
            {tableShortNames[badgeType] || badgeType}
          </div>
        {/if}
        {msg}
        {#if cancelCallbak}
          <div class="float-right cursor-pointer" on:click={cancelCallbak}>X</div>
        {/if}
      </span>
    </Tooltip>
  </div>
{/if}

<style>
  .text-2xs {
    font-size: 0.5rem;
    line-height: 0.2rem;
  }
</style>