---
import type { ExtendedEvent } from "@components/types/event";
import PageLayout from "@layouts/PageLayout.astro";
import { astroI18n, createGetStaticPaths } from "astro-i18n";
import { getCollection, type CollectionEntry } from "astro:content";
import EventFights from "@components/event/EventFights.svelte";
import TeamList from "@components/event/TeamList.svelte";

export const getStaticPaths = createGetStaticPaths(async () => {
    const events = await Promise.all(
        (await getCollection("events")).map(async (event) => ({
            event: (await fetch(import.meta.env.PUBLIC_API_SERVER + "/events/" + event.data.eventId).then((value) => value.json())) as ExtendedEvent,
            page: event,
        }))
    );

    return events.map((event) => ({
        props: {
            event: event.event,
            page: event.page,
        },
        params: {
            slug: event.page.slug,
        },
    }));
});

const { event, page } = Astro.props as { event: ExtendedEvent; page: CollectionEntry<"events"> };

const { Content } = await page.render();
---

<PageLayout title={event.event.name} wide={true}>
    <div>
        <h1 class="text-2xl font-bold">{event.event.name}</h1>
        <h2 class="text-md text-gray-300 mb-4">
            {
                new Date(event.event.start).toLocaleDateString(astroI18n.locale, {
                    year: "numeric",
                    month: "numeric",
                    day: "numeric",
                })
            }
            {
                new Date(event.event.start).toDateString() !== new Date(event.event.end).toDateString()
                    ? ` - ${new Date(event.event.end).toLocaleDateString(astroI18n.locale, {
                          year: "numeric",
                          month: "numeric",
                          day: "numeric",
                      })}`
                    : ""
            }
        </h2>
    </div>
    <article>
        <Content />
    </article>
    <TeamList client:load event={event} />
    {
        page.data.viewConfig && (
            <div class="py-2 border-t border-t-gray-600">
                <h1 class="text-2xl font-bold mb-4">Kampfplan</h1>
                <EventFights viewConfig={page.data.viewConfig} event={event} client:load />
            </div>
        )
    }
</PageLayout>

<style is:global>
    article {
        > * {
            all: revert;
        }

        code {
            @apply dark:text-neutral-400 text-neutral-800;
        }

        pre.astro-code {
            @apply w-fit p-4 rounded-md border-2 border-gray-600 my-4;
        }

        a {
            @apply text-neutral-800 dark:text-neutral-400 hover:underline;
        }
    }
</style>
