---
import Layout from "../../layouts/Layout.astro";
import games from "../../json/games.json";
import GameItem from "@components/GameItem.astro";

import { STATIC_PATHS, i18n } from "@i18n/utils";
import Input from "@components/UI/Input.astro";
const t = i18n.inferLangUseTranslations(Astro.url);

export function getStaticPaths() {
  return STATIC_PATHS;
}
---

<Layout title={t("pages.games")}>
  <h1 class="title-text">{t("games.title")}</h1>
  <div class="search">
    <Input inputName="games-search" placeholder={t("games.search")} height="30px" />
  </div>
  <div class="no-results"></div>
  <main id="main-content" class="grid">
    {
      Object.keys(games).map((key) => {
        const game = (games as any)[key];
        return <GameItem game={game} />;
      })
    }
  </main>
</Layout>

<script>
  const search = document.getElementById("games-search-input") as HTMLInputElement;
  const mainContent = document.getElementById("main-content") as HTMLDivElement;
  search.addEventListener("input", () => {
    const filter = search.value.toUpperCase();
    const games = mainContent.children;
    let results = 0;
    for (let i = 0; i < games.length; i++) {
      const game = games[i] as HTMLDivElement;
      const name = game.getAttribute("data-name")!;
      if (name.toUpperCase().indexOf(filter) > -1) {
        game.style.display = "";
        results++;
      } else {
        game.style.display = "none";
      }
    }
    if (results === 0) {
      const noResults = document.querySelector(".no-results") as HTMLDivElement;
      if (noResults) {
        noResults.style.display = "block";
        noResults.innerHTML = "No results found";
      }
    } else {
      const noResults = document.querySelector(".no-results") as HTMLDivElement;
      if (noResults) {
        noResults.style.display = "none";
      }
    }
  });
</script>

<style>
  .search {
    display: flex;
    justify-content: center;
    margin-bottom: 20px;
    width: 50%;
    margin: 0 auto;
  }
  .grid {
    color: var(--text-color);
    height: max-content;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(175px, 1fr));
    text-align: center;
    justify-content: center;
    gap: 1rem;
    width: 90%;
    margin: 0 auto;
    margin-top: 20px;
  }

  .no-results {
    text-align: center;
    height: 15rem;
    width: 100%;
    font-size: 2rem;
    margin-top: 10px;
    display: none;
  }
</style>
