<script lang="ts">
  import { Rundentyp, Rundentypen, type Turnier } from "../model/models";
  import { getColor } from "./getColor";

  const { turniere }: { turniere: Turnier[] } = $props();

  const rundentypen = $derived.by(() => {
    const rundentypenSet = new Set<string>();
    turniere
      .flatMap((t) => t.teilnehmer || [])
      .map((t) => (t.disqualifiziert ? Rundentyp.DISQUALIFIZIERT : !t.teilgenommen ? Rundentyp.NICHT_TEILGENOMMEN : t.runde))
      .forEach((r) => rundentypenSet.add(r));

    return Rundentypen.filter((r) => rundentypenSet.has(r.typ));
  });

  const hasVorbehalt = $derived(turniere.some((t) => t.vorbehalt));
</script>

<div class="legende">
  {#each rundentypen as runde}
    <div
      class="example-box"
      style="background-color: {getColor(runde.typ)}"
    ></div>
    {runde.name} &nbsp;
  {/each}
  {#if hasVorbehalt}
    *&nbsp;Ergebnis noch nicht bestätigt
  {/if}
</div>

<style lang="scss">
  .legende {
    padding-top: 1em;
    vertical-align: top;

    .example-box {
      vertical-align: top;
      width: 1em;
      height: 1.2em;
      display: inline-block;
      border: 1px solid #d8d8d8;
    }
  }
</style>
