<script lang="ts">
    import type { ExtendedEvent } from "@type/event.ts";
    import type { EventViewConfig } from "./types";
    import { onMount } from "svelte";
    import { eventRepo } from "@components/repo/event";
    import GroupDisplay from "./GroupDisplay.svelte";
    import ConnectionRenderer from "./ConnectionRenderer.svelte";
    import EleminationDisplay from "./EleminationDisplay.svelte";
    import DoubleEleminationDisplay from "./DoubleEleminationDisplay.svelte";

    const { event, viewConfig }: { event: ExtendedEvent; viewConfig: EventViewConfig } = $props();

    let loadedEvent = $state<ExtendedEvent>(event);

    onMount(() => {
        loadEvent();
    });

    async function loadEvent() {
        loadedEvent = await $eventRepo.getEvent(event.event.id.toString());
    }

    let selectedView = $state<string>(Object.keys(viewConfig)[0]);
</script>

<div class="flex gap-4 overflow-x-auto mb-4">
    {#each Object.entries(viewConfig) as [name, view]}
        <button
            class="mb-8 border-gray-700 border rounded-lg p-4 w-60 hover:bg-gray-700 hover:shadow-lg transition-shadow hover:border-gray-500"
            class:bg-gray-800={selectedView === name}
            onclick={() => (selectedView = name)}
        >
            <h1 class="text-left">{view.name}</h1>
        </button>
    {/each}
</div>

{#if selectedView}
    {@const view = viewConfig[selectedView]}
    <div class="overflow-x-scroll relative">
        <ConnectionRenderer />
        {#if view.view.type === "GROUP"}
            <GroupDisplay event={loadedEvent} config={view.view} />
        {:else if view.view.type === "ELEMINATION"}
            <EleminationDisplay event={loadedEvent} config={view.view} />
        {:else if view.view.type === "DOUBLE_ELEMINATION"}
            <DoubleEleminationDisplay event={loadedEvent} config={view.view} />
        {/if}
    </div>
{/if}
