---
import { getCollection } from "astro:content";
import { CATEGORIES } from "@/content/config";

import Header from "@/components/Header.astro";
import Footer from "@/components/Footer.astro";
import Layout from "@/layouts/Layout.astro";
import Post from "@/components/Post.astro";

export async function getStaticPaths({ paginate }: { paginate: any }) {
  const blogEntries = await getCollection("blog");

  return CATEGORIES.flatMap((category) => {
    const filteredPosts = blogEntries.filter(
      (post) => post.data.category == category,
    );
    return paginate(filteredPosts, {
      params: { category },
      pageSize: 3,
    });
  });
}

const { page } = Astro.props;

const posts = page.data as Array<any>;

const pages = Array.from({ length: page.lastPage }, (_, i) => i + 1);
---

<Layout title="log101">
  <Header />
  <div class="posts">
    {
      posts.length > 0 ? (
        posts
          .sort((p1, p2) => p2.data.date.getTime() - p1.data.date.getTime())
          .map((p) => <Post post={p} componentType="long" />)
      ) : (
        <p>
          Henüz bu kategoride bir yazı yayınlanmadı. Yazarımızın ilhama veya
          teşviğe ihtiyacı olabilir!
        </p>
      )
    }
  </div>
  {
    page.lastPage != 1 && (
      <>
        <div id="pagination-container" class="flex gap-2">
          <button>
            <a href={page.url.prev} class="no-underline text-inherit">
              geri git
            </a>
          </button>
          {pages.map((pageNumber) => {
            switch (pageNumber) {
              case page.currentPage:
                return <a>{pageNumber}</a>;

              default:
                return (
                  <a
                    href={`${page.url.current.slice(0, -1)}${pageNumber}`}
                    class="text-inherit">
                    {pageNumber}
                  </a>
                );
            }
          })}
          <button>
            <a href={page.url.next} class="no-underline text-inherit">
              ileri git
            </a>
          </button>
        </div>
      </>
    )
  }
  <Footer />
</Layout>