---
import {astroI18n, createGetStaticPaths, t} from "astro-i18n";
import {getCollection, CollectionEntry} from "astro:content";
import PageLayout from "../../layouts/PageLayout.astro";
import {TagSolid, CalendarMonthSolid} from "flowbite-svelte-icons"
import TagComponent from "../../components/TagComponent.astro";
import {l} from "../../util/util";
import {capitalize} from "../../components/admin/util";
export const getStaticPaths = createGetStaticPaths(async () => {
    const posts = await getCollection('announcements', entry => entry.id.split('/')[0] === astroI18n.locale)

    return posts.map(value => ({
        params: {
            slug: value.slug.split("/").slice(1).join("/")
        },
        props: {
            post: value
        }
    }))
})

interface Props {
    post: CollectionEntry<'announcements'>
}

const {post} = Astro.props;
const { Content } = await post.render();
---

<PageLayout title={post.data.title}>
    <article>
        <h1 class="text-4xl mb-0">{post.data.title}</h1>
        <h5 class="flex items-center mt-0 text-neutral-300"><TagSolid class="w-4 h-4 mr-2" /> {post.data.tags.map(tag => (
                <TagComponent tag={tag} />
        ))} <CalendarMonthSolid class="w-4 h-4 mr-2" /> {Intl.DateTimeFormat(astroI18n.locale, {
            day: 'numeric',
            month: 'short',
            year: 'numeric'
        }).format(post.data.created)} </h5>
        {post.data.german && (
                <div class="bg-yellow-100 border-l-4 border-yellow-500 text-yellow-700 p-4" role="alert">
                    <div class="font-bold">{t("warning.title", {}, {route: "/rules"})}</div>
                    <div>{t("warning.text", {}, {route: "/rules"})}</div>
                </div>
        )}
        <Content />
        <script>
            import type {ExtendedEvent} from "../../components/types/event";
            import FightTable from "../../components/FightTable.svelte";
            // @ts-ignore
            import {get} from "svelte/store";
            import {eventRepo} from "../../components/repo/repo";
            import GroupTable from "../../components/GroupTable.svelte";
            const eventMounts: Map<string, ((ev: ExtendedEvent) => void)[]> = new Map();

            class FightTableElement extends HTMLElement {
                connectedCallback(): void {
                    if (!eventMounts.has(this.dataset['event'])) {
                        eventMounts.set(this.dataset['event'], [])
                    }
                    const rows = Number.parseInt(this.dataset['rows']);
                    eventMounts.get(this.dataset['event']).push(ev => {
                        new FightTable({
                            target: this,
                            props: {
                                event: ev,
                                group: this.dataset['group'],
                                rows: !isNaN(rows) ? rows : 1,
                            }
                        })
                    })
                }
            }

            class GroupTableElement extends HTMLElement {
                connectedCallback(): void {
                    if (!eventMounts.has(this.dataset['event'])) {
                        eventMounts.set(this.dataset['event'], [])
                    }
                    const rows = Number.parseInt(this.dataset['rows']);
                    eventMounts.get(this.dataset['event']).push(ev => {
                        new GroupTable({
                            target: this,
                            props: {
                                event: ev,
                                group: this.dataset['group'],
                                rows: !isNaN(rows) ? rows : 1,
                            }
                        })
                    })
                }
            }

            customElements.define('fight-table', FightTableElement);
            customElements.define('group-table', GroupTableElement);

            function mountEvent() {
                for (const key of eventMounts.keys()) {
                    get(eventRepo).getEvent(key).then(ev => {
                        for (const mount of eventMounts.get(key)) {
                            mount(ev)
                        }
                    })
                }
            }

            mountEvent()
        </script>
    </article>
</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;
        }
    }
</style>