<script lang="ts">
  import { onMount } from "svelte";
  import Karte from "../components/Karte.svelte";
  import {
    ligabereicheState,
    ligabereichSelection,
    loadLigabereiche,
  } from "../stores/LigabereicheStore";
  import { getLigaSlug } from "../stores/getLigaSlug";
  import { configuration } from "../stores/configuration";
  import Spinner from "../components/Spinner.svelte";
  import BackButton from "../components/BackButton.svelte";

  onMount(() => {
    loadLigabereiche();
  });
  function setSelection(name?: string) {
    ligabereichSelection.set(name);
  }

  const ligabereiche = $derived(
    ($ligabereicheState?.ligabereiche || [])
      .filter((l) => {
        if (configuration.view === "archiv") return true;
        else
          return !l.zuordnung?.length == (configuration.view === "bundesligen");
      })
      .map((b) => ({
        ...b,
        slug: getLigaSlug(b.bezeichnung),
        // group by b.rigen.leistungsklasse
        gruppen: b.rigen.reduce(
          (acc, curr) => {
            const gruppe = acc.find((g) => g.name === curr.leistungsklasse);
            if (gruppe) {
              gruppe.ligen.push({
                name: curr.bezeichnung,
                id: curr.id,
              });
            } else {
              acc.push({
                name: curr.leistungsklasse,
                ligen: [
                  {
                    name: curr.bezeichnung,
                    id: curr.id,
                  },
                ],
              });
            }
            return acc;
          },
          [] as { name: string; ligen: { name: string; id: number }[] }[]
        ),
      }))
  );

  function removeYear(input: string): string {
    let removed = input.replace(/\d{4}\/?$/, "");
    return removed.endsWith("/") ? removed : `${removed}/`;
  }

  function generateLinkLiga(liga: { id: number; name: string }): string {
    const prefix = removeYear(window.location.pathname);
    return `${prefix}${(liga.id << 1).toString(36)}-${getLigaSlug(liga.name)}`;
  }

  function generateLinkTurnier(turnier: {
    id: number;
    bezeichnung: string;
  }): string {
    const prefix = removeYear(window.location.pathname);
    return `${prefix}${(1 + (turnier.id << 1)).toString(36)}-${getLigaSlug(turnier.bezeichnung)}`;
  }

  const Header1 = configuration.view === "bundesligen" ? "h2" : "h3";
  const Header2 = configuration.view === "bundesligen" ? "h3" : "h4";
</script>

<div>
  {#if $ligabereicheState}
    <h2>
      {configuration.view === "bundesligen"
        ? "Bundesligen"
        : configuration.view == "ligabereiche"
          ? "Ligabereiche"
          : "Saisonarchiv"}
      {$ligabereicheState.saison.bezeichnung}
    </h2>
  {/if}

  <div class="ligabereiche-overview">
    {#if configuration.view === "ligabereiche"}
      <div>
        <Karte />
      </div>
    {/if}
    <div>
      {#if !$ligabereicheState}
        <Spinner />
      {/if}

      {#if $ligabereichSelection}
        <BackButton onclick={() => setSelection(undefined)} />
      {/if}
      {#each ligabereiche as bereich}
        {#if !$ligabereichSelection || $ligabereichSelection == getLigaSlug(bereich.slug)}
          {#if configuration.view !== "bundesligen"}
            <svelte:element this={Header1}>{bereich.bezeichnung}</svelte:element>
          {/if}
          {#if !bereich.gruppen.length && !bereich.turniere.length}
            <div>Keine Daten vorhanden.</div>
            <div>&nbsp;</div>
          {/if}
          {#each bereich.gruppen as gruppe}
            <svelte:element this={Header2}>{gruppe.name}</svelte:element>
            {#each gruppe.ligen as liga}
              <div>
                <a href={generateLinkLiga(liga)}>
                  {liga.name}
                </a>
              </div>
            {/each}
            <div>&nbsp;</div>
          {/each}
          {#if bereich.turniere.length > 0}
            <svelte:element this={Header2}>Turniere</svelte:element>
            {#each bereich.turniere as turnier}
              <div>
                <a href={generateLinkTurnier(turnier)}>{turnier.bezeichnung}</a>
              </div>
            {/each}
            <div>&nbsp;</div>
          {/if}
        {/if}
      {/each}
    </div>
  </div>
</div>

<style lang="scss">
  .ligabereiche-overview {
    display: flex;
    gap: 2rem;
    @media (max-width: 800px) {
      flex-direction: column;
    }

    > div {
      flex: 1;
    }
  }
</style>
