<!--
  -   This file is a part of the SteamWar software.
  -
  -   Copyright (C) 2024 SteamWar.de-Serverteam
  -
  -   This program is free software: you can redistribute it and/or modify
  -   it under the terms of the GNU Affero General Public License as published by
  -   the Free Software Foundation, either version 3 of the License, or
  -   (at your option) any later version.
  -
  -   This program is distributed in the hope that it will be useful,
  -   but WITHOUT ANY WARRANTY; without even the implied warranty of
  -   MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
  -   GNU Affero General Public License for more details.
  -
  -   You should have received a copy of the GNU Affero General Public License
  -   along with this program.  If not, see <https://www.gnu.org/licenses/>.
  -->

<script lang="ts">
    import type {ExtendedEvent} from "@type/event.ts";
    import {onMount} from "svelte";

    export let event: ExtendedEvent;
    export let group: string | null = null;

    const scrollTime = 10000;

    $: groupFights = event.fights.filter(fight => group === null || fight.group === group);

    let clock = new Date();
    let scrollContainer: HTMLDivElement;
    let scroll = 0;

    onMount(() => {
        const interval = setInterval(() => {
            clock = new Date();
        }, 1000);
        const scrollinterval = setInterval(() => {
            if (scroll >= scrollTime / 10) {
                if (scrollContainer.scrollHeight - scrollContainer.scrollTop === scrollContainer.clientHeight) {
                    scrollContainer.scrollTo({
                        top: 0,
                        behavior: "smooth"
                    })
                } else {
                    scrollContainer.scrollBy({
                        top: scrollContainer.clientHeight,
                        behavior: "smooth"
                    })
                }
                scroll = 0;
            } else {
                scroll += 1;
            }
        }, 10);
        return () => {
            clearInterval(interval);
            clearInterval(scrollinterval);
        };
    })
</script>

<div class="bg-black text-white h-screen w-screen p-4 flex flex-col">
    <div class="w-full border rounded-xl flex flex-col">
        <div class="flex justify-between p-2">
            <h1 class="self-center">{event.event.name}</h1>
            <h1 class="self-start">{new Intl.DateTimeFormat("de-DE", {hour: "2-digit", minute: "2-digit"}).format(clock)}</h1>
        </div>
        <div role="progressbar" class="w-full h-2 rounded-b-full overflow-hidden border-t">
            <div class="h-full bg-white" style="width: {scroll / (scrollTime / 1000)}%;"></div>
        </div>
    </div>
    <div class="flex mt-4 flex-col gap-96 overflow-y-scroll overflow-x-hidden" bind:this={scrollContainer}>
        {#each groupFights as fight (fight.id)}
            <div class="flex justify-between border rounded-xl p-2 mb-96">
                <h1>{fight.blueTeam.name} vs {fight.redTeam.name}</h1>
                {#if fight.ergebnis !== 0}
                    {#if fight.ergebnis === 1}
                        <h1>{fight.blueTeam.name} gewinnt</h1>
                    {:else if fight.ergebnis === 2}
                        <h1>{fight.redTeam.name} gewinnt</h1>
                    {:else}
                        <h1>Unentschieden</h1>
                    {/if}
                {:else}
                    <h1>{new Intl.DateTimeFormat("de-DE", {day: "2-digit", month: "2-digit", "year": "2-digit", hour: "2-digit", minute: "2-digit"}).format(fight.start)}</h1>
                {/if}
            </div>
        {/each}
    </div>
    <div class="flex-grow"></div>
    <div class="w-full mt-4 flex justify-between border rounded-xl p-2 self-end">
        <h1 class="self-center">{event.event.name}</h1>
        <h1 class="self-start">{new Intl.DateTimeFormat("de-DE", {hour: "2-digit", minute: "2-digit"}).format(clock)}</h1>
    </div>
</div>

<style lang="scss">
  ::-webkit-scrollbar {
    width: 0;
  }
</style>