---
import { AstroSeo } from "@astrolib/seo";
import { assertSecret } from "@blitzkit/core";
import locales from "@blitzkit/i18n/locales.json";
import { literals } from "@blitzkit/i18n/src/literals";
import { Box, Flex, Link } from "@radix-ui/themes";
import type { GetStaticPaths } from "astro";
import { AesonPlug } from "../../components/AesonPlug";
import HomeHero from "../../components/HomeHero.astro";
import { Plugs } from "../../components/Plugs";
import ToolCard from "../../components/ToolCard.astro";
import { tools, type Tool } from "../../constants/tools";
import { getStrings } from "../../core/i18n/getStrings";
import BaseLayout from "../../layouts/BaseLayout.astro";

const MAX_TOOLS_PER_ROW = 2;

const PUBLIC_ASSET_BRANCH = assertSecret(import.meta.env.PUBLIC_BRANCH);
const { locale } = Astro.props;
const strings = getStrings(locale);
const rows: Tool[][] = [];

for (const id in tools) {
  const tool = tools[id];

  if ("disabled" in tool && tool.disabled) continue;

  const compatibleRow = rows.find(
    (row) =>
      row.length < MAX_TOOLS_PER_ROW &&
      !("significant" in row[0] && row[0].significant)
  );

  if (compatibleRow) {
    compatibleRow.push(tool);
  } else {
    rows.push([tool]);
  }
}

export const getStaticPaths = (() => {
  return [
    ...locales.supported
      .filter(({ locale }) => locale !== locales.default)
      .map(({ locale }) => ({ params: { locale }, props: { locale } })),
    { params: { locale: undefined }, props: { locale: locales.default } },
  ];
}) satisfies GetStaticPaths;
---

<AstroSeo
  title="BlitzKit"
  description={strings.website.home.seo_description}
  canonical={Astro.url.href}
  openGraph={{
    url: Astro.url.href,
    title: "BlitzKit",
    description: strings.website.home.seo_description,
    site_name: "BlitzKit",
  }}
  twitter={{ cardType: "summary_large_image" }}
/>

<BaseLayout {locale}>
  <HomeHero />

  <!-- <Flex justify="center" py="6" px="4" justify="center">
    <Flex
      wrap="wrap"
      justify="between"
      maxWidth="64rem"
      gap="6"
      align="center"
      flexGrow="1"
    >
      <HomeLocaleSwitcher {locale} client:load />
      <DiscordPlug {locale} client:only="react">
        <DiscordPlug {locale} skeleton slot="fallback" />
      </DiscordPlug>
    </Flex>
  </Flex> -->

  {
    locale !== locales.default && (
      <Flex justify="center" mb="4">
        <Link
          href="https://crowdin.com/project/blitzkrieg"
          target="_blank"
          underline="always"
        >
          {literals(strings.website.home.help_translate, {
            name: "BlitzKit",
            language:
              strings.common.locales[
                locale as keyof typeof strings.common.locales
              ],
          })}
        </Link>
      </Flex>
    )
  }

  <Plugs client:idle />

  {
    PUBLIC_ASSET_BRANCH === "preview" && (
      <Flex justify="center" my="8" px="4">
        <AesonPlug />
      </Flex>
    )
  }

  <Flex p="4" justify="center" gap="4" mt="3">
    <Flex maxWidth="80rem" flexGrow="1" gap="4" direction="column">
      {
        rows.map((row) => (
          <Flex gap="4" direction={{ initial: "column", sm: "row" }}>
            {row.map((tool) => (
              <ToolCard {tool} />
            ))}
            {row.length < MAX_TOOLS_PER_ROW &&
              !("significant" in row[0] && row[0].significant) && (
                <Box flexGrow="1" />
              )}
          </Flex>
        ))
      }
    </Flex>
  </Flex>

  <div style={{ flex: 1 }}></div>
</BaseLayout>