<script lang="ts">
  import type { TurnierTeilnehmer } from "../model/models";
  import { Rundentyp } from "../model/models";
  import { getColor } from "./getColor";
  import { onMount } from "svelte";

  const {
    ergebnis,
    onClick,
    index,
  }: {
    ergebnis: TurnierTeilnehmer;
    onClick: () => void;
    index: number;
  } = $props();

  let showCursor = $state(false);

  onMount(() => {
    if (index === 0) {
      setTimeout(() => {
        showCursor = true;
      }, 500);
    }
  });

  function getRundenLabel(runde: Rundentyp): string {
    switch (runde) {
      case Rundentyp.ZWISCHENRUNDE:
        return "ZR";
      case Rundentyp.VORRUNDE:
        return "VR";
      default:
        return "";
    }
  }
</script>

<td
  style="background-color: {getColor(ergebnis.runde)}; position: relative;"
  onclick={onClick}
  role="button"
  tabindex={index}
  class="ergebniscell"
>
  {#if index === 0 && showCursor}
    <div class="cursor-pointer"></div>
  {/if}
  <b>{ergebnis.platz}</b>
  <div class="slim">
    {#if ergebnis.jswertung && getRundenLabel(ergebnis.runde) == ""}
      <span style="margin-right: 5px;"
        >{ergebnis.jswertung.score.toFixed(3)}</span
      >
    {/if}
    {#if ergebnis.platzwertung?.[0]?.wertungen}
      {@const unten = ergebnis.platzwertung[0].wertungen.filter(
        (w) => w.unten === true
      )}
      {@const oben = ergebnis.platzwertung[0].wertungen.filter(
        (w) => w.unten === false
      )}
      {@const andere = ergebnis.platzwertung[0].wertungen.filter(
        (w) => typeof w.unten !== "boolean"
      )}
      {#if unten.length > 0}
        <span style="margin-right: 5px;"
          >{unten.map((w) => w.platz).join("\u202F")}</span
        >
      {/if}
      {#if oben.length > 0}
        <span>{oben.map((w) => w.platz).join("\u202F")}</span>
      {/if}
      {#if andere.length > 0}
        <span>{andere.map((w) => w.platz).join("\u202F")}</span>
      {/if}
    {/if}
    {#if ergebnis.disqualifiziert}
      disq.
    {:else if !ergebnis.teilgenommen}
      n.a.
    {:else}
      {getRundenLabel(ergebnis.runde)}
    {/if}
  </div>
</td>

<style lang="scss">
  .ergebniscell {
    &:hover,
    &:focus {
      filter: brightness(0.9);
      cursor: pointer;
    }
  }

  .cursor-pointer {
    position: absolute;
    top: 50%;
    left: 80%;
    width: 24px;
    height: 24px;
    pointer-events: none;
    z-index: 1000;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640"><path fill="white" stroke-width="20" stroke="black" d="M173.3 66.5C181.4 62.4 191.2 63.3 198.4 68.8L518.4 308.7C526.7 314.9 530 325.7 526.8 335.5C523.6 345.3 514.4 351.9 504 351.9L351.7 351.9L440.6 529.6C448.5 545.4 442.1 564.6 426.3 572.5C410.5 580.4 391.3 574 383.4 558.2L294.5 380.5L203.2 502.3C197 510.6 186.2 513.9 176.4 510.7C166.6 507.5 160 498.3 160 488L160 88C160 78.9 165.1 70.6 173.3 66.5z"/></svg>');
    background-size: contain;
    animation: cursorAnimation 2s linear forwards;
  }

  @keyframes cursorAnimation {
    0% {
      opacity: 0;
      transform: scale(2);
    }
    20% {
      opacity: 1;
      transform: scale(2);
    }
    40% {
      opacity: 1;
      transform: scale(2);
    }
    50% {
      opacity: 1;
      transform: scale(1.5);
    }
    60% {
      opacity: 1;
      transform: scale(2);
    }
    80% {
      opacity: 1;
      transform: scale(2);
    }
    100% {
      opacity: 0;
      transform: scale(2);
    }
  }

  div.slim {
    white-space: nowrap;
  }
</style>
