---
import { getCollection } from "astro:content";

import { slugify } from "@lib/utils";

import SectionTitle from "@components/SectionTitle.astro";
import MainLayout from "@layouts/MainLayout.astro";

import Token from "@components/Token.astro";
import ProjectCard from "@components/ProjectCard.astro";

const projects = (await getCollection("projects")).sort(
  (a, b) => b.data.date.valueOf() - a.data.date.valueOf()
);

const types = [...new Set(projects.map((project) => project.data.type))];
---

<MainLayout title="Projects">
  <div class="w-full">
    <section id="projects" class="bg-white dark:bg-gray-950">
      <div class="mx-auto max-w-4xl px-8 py-16 text-center">
        <SectionTitle Tag="h1">Recent Projects</SectionTitle>
        <div id="filter-tokens" class="my-8 space-y-2 space-x-2">
          <Token
            as="button"
            aria-pressed="true"
            class="filter-token !text-primary ring-primary bg-white ring-2 hover:cursor-pointer"
            data-type="all">All</Token
          >
          {
            types.map((type) => (
              <Token
                as="button"
                aria-pressed="false"
                class="filter-token hover:cursor-pointer"
                data-type={slugify(type)}
              >
                {type}
              </Token>
            ))
          }
        </div>
        <div class="space-y-16 md:space-y-8">
          {
            projects.map((project, index) => {
              return (
                <ProjectCard
                  project={project}
                  textOn={index % 2 === 0 ? "left" : "right"}
                  data-type={slugify(project.data.type)}
                  class="project"
                />
              );
            })
          }
        </div>
      </div>
    </section>
  </div>
</MainLayout>

<script>
  function setUpFilters() {
    const tokensContainer = document.querySelector("#filter-tokens");

    if (!tokensContainer) return;

    const tokens =
      tokensContainer.querySelectorAll<HTMLElement>(".filter-token");
    const projects = document.querySelectorAll<HTMLElement>(".project");

    tokensContainer.addEventListener("click", (e) => {
      const token = (e.target as Element).closest<HTMLElement>(".filter-token");
      if (!token) return;

      tokens.forEach((t) => {
        t.classList.remove(
          "bg-white",
          "!text-primary",
          "ring-primary",
          "ring-2"
        );
        t.setAttribute("aria-pressed", "false");
      });

      token.classList.add(
        "bg-white",
        "!text-primary",
        "ring-primary",
        "ring-2"
      );
      token.setAttribute("aria-pressed", "true");

      const type = token.dataset.type;

      projects.forEach((project) => {
        const match = type === "all" || project.dataset.type === type;
        project.classList.toggle("hidden", !match);
      });
    });
  }

  setUpFilters();
  document.addEventListener("astro:page-load", setUpFilters);
</script>