---
import BackButton from '~/components/BackButton.astro'
import Button from '~/components/Button.astro'
import Description from '~/components/Description.astro'
import ArrowRightIcon from '~/icons/ArrowRightIcon.astro'
import InfoIcon from '~/icons/InfoIcon.astro'
import Layout from '~/layouts/Layout.astro'
import { getAllMods, getAuthorLink, getLocalizedDate } from '~/mods'
import { getUI } from '~/utils/i18n'
import { getLocale, getOtherLocales } from '~/utils/i18n'

export async function getStaticPaths() {
  const mods = await getAllMods()
  return mods.flatMap((mod) => [
    ...getOtherLocales().map((locale) => ({
      params: {
        slug: mod.id,
        locale: locale,
      },
      props: {
        ...mod,
        locale: locale,
      },
    })),
    {
      params: {
        slug: mod.id,
        locale: undefined,
      },
      props: {
        ...mod,
        locale: undefined,
      },
    },
  ])
}

// https://github.com/TeaClientMC/Website/blob/7faacc9f8b2c79c74f711d413b155c84faafc00d/src/pages/news/%5B...slug%5D.astro

const mod = Astro.props

const dates = {
  createdAt: getLocalizedDate(mod.createdAt),
  updatedAt: getLocalizedDate(mod.updatedAt),
}

const locale = getLocale(Astro as { params: { locale?: string } })

const {
  routes: {
    mods: { slug },
  },
} = getUI(locale)
---

<Layout
  title={slug.title.replace('{name}', mod.name)}
  description={slug.description.replace('{name}', mod.name)}
  ogImage={mod.image}
>
  <main class="mt-6 2xl:mt-0">
    <div class="mx-auto mb-24 mt-12 flex flex-col gap-6 px-8 lg:mt-32 lg:w-1/2">
      <div
        id="install-theme-error"
        class="flex flex-col items-center justify-center gap-2 rounded-xl bg-red-200 p-2 px-4 md:flex-row md:justify-between dark:bg-red-700"
      >
        <div class="flex items-center gap-2 text-center md:text-left">
          <InfoIcon />
          <p class="text-sm">
            {slug.alert.description}
          </p>
        </div>
        <Button
          href="/download"
          class="inline-flex flex-shrink-0 whitespace-nowrap !rounded-lg bg-red-300 dark:bg-red-800"
          isAlert
        >
          {slug.alert.button}
          <ArrowRightIcon class="size-4" />
        </Button>
      </div>
      <BackButton />
      <div>
        <Description class="text-6xl font-bold">{mod.name}</Description>
        <Description>{mod.description}</Description>
      </div>
      <img
        src={mod.image}
        alt={mod.name}
        class="h-full w-full rounded-xl border-2 border-dark object-cover shadow"
      />
      <div class="flex flex-col justify-between gap-2 sm:flex-row">
        <div class="flex flex-shrink-0 flex-col gap-2 font-normal">
          <p
            set:html={slug.createdBy
              .replace('{author}', mod.author)
              .replace('{version}', mod.version)
              .replace('{link}', getAuthorLink(mod.author))}
          />
          <p
            set:html={slug.creationDate.replace('{createdAt}', dates.createdAt)}
          />
          {
            dates.createdAt !== dates.updatedAt && (
              <p
                set:html={slug.latestUpdate.replace(
                  '{updatedAt}',
                  dates.updatedAt,
                )}
              />
            )
          }
          {
            mod.homepage && (
              <a
                href={mod.homepage}
                target="_blank"
                rel="noopener noreferrer"
                class="zen-link"
              >
                {slug.visitModHomepage}
              </a>
            )
          }
        </div>
        <div class="flex flex-col sm:items-end">
          <Button
            class="hidden"
            id="install-theme"
            extra={{ 'zen-theme-id': mod.id }}
            isPrimary
          >
            {slug.installMod}
          </Button>
          <Button
            class="hidden"
            id="install-theme-uninstall"
            extra={{ 'zen-theme-id': mod.id }}
            isPrimary
          >
            {slug.uninstallMod}
          </Button>
        </div>
      </div>
      <!-- TODO: Readme markdown
      <div class="h-[1px] opacity-80 bg-dark w-full"></div>
      -->
    </div>
    <div></div>
  </main></Layout
>
