---
import {getCollection, type CollectionEntry} from "astro:content";
import {astroI18n, createGetStaticPaths, t} from "astro-i18n";
import PageLayout from "@layouts/PageLayout.astro";
import LanguageWarning from "@components/LanguageWarning.astro";
import EloTable from "@components/EloTable.svelte";
import {l} from "../../util/util";
import { Image } from "astro:assets";

export const getStaticPaths = createGetStaticPaths(async () => {
    let posts = await getCollection("rules", value => value.id.split("/")[0] === astroI18n.locale);

    const germanPosts = await getCollection("rules", entry => entry.id.split("/")[0] === astroI18n.fallbackLocale);

    germanPosts.forEach(value => {
        if (posts.find(post => post.id.split("/")[1] === value.id.split("/")[1])) {
            return;
        } else {
            posts.push(value);
        }
    });

    const modes = await getCollection("modes");
    const publics = await getCollection("publics");

    return posts.map((page) => ({
        props: {
            page,
            german: page.id.split("/")[0] != astroI18n.locale,
            mode: modes.find(value => value.id === page.id.split("/")[1].split(".")[0]),
            publics: publics.filter(value => value.data.gamemode.id === page.id.split("/")[1].split(".")[0]),
        },
        params: {
            mode: page.slug.split("/")[1],
        },
    }),
    );
});

interface Props {
    page: CollectionEntry<"rules">,
    mode: CollectionEntry<"modes">,
    publics: CollectionEntry<"publics">[],
    german: boolean
}

const {page, german, mode, publics} = Astro.props;

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

<PageLayout title={t("rules.title", {mode: t(`${page.data.translationKey}.title`)})}>
    <h1 class="text-3xl font-bold">{t(`${page.data.translationKey}.title`)}</h1>
    {mode && mode.data.ranked && (
        <Fragment>
            <EloTable gamemode={page.id.split("/")[1].split(".")[0]} client:load topFive={true}/>
            <a class="text-neutral-800 dark:text-neutral-400 hover:underline" href={l(`/rangliste/${page.id.split("/")[1].split(".")[0]}`)}>{t("rules.ranking")}</a>
        </Fragment>
    )}
    {publics && publics.length != 0 && (
        <Fragment>
            <div class="flex overflow-x-scroll">
                {publics.map(value => (
                    <a href={l(`/publics/${value.id}`)} style="display: contents">
                        <Image src={value.data.image} alt={value.data.name} height={300} width={300} class="drop-shadow"></Image>
                    </a>
                ))}
            </div>
            <a class="text-neutral-800 dark:text-neutral-400 hover:underline" href={l(`/publics/${page.id.split("/")[1].split(".")[0]}`)}>{t("rules.publics")}</a>
        </Fragment>
    )}
    <article>
        {german && (
            <LanguageWarning/>
        )}
        <Content/>
    </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;
        }

        a {
            @apply text-neutral-800 dark:text-neutral-400 hover:underline;
        }
    }

    link-to {
        display: contents;
    }
</style>