---
import type { GetStaticPathsOptions } from "astro";
import { Image } from "astro:assets";
import { getCollection } from "astro:content";
import { getUnixTime, format as formatDate } from "date-fns";
import { enUS as enUSLocale } from "date-fns/locale/en-US";
import GalleryLayout from "../../layouts/GalleryLayout.astro";

export async function getStaticPaths({ paginate }: GetStaticPathsOptions) {
  const stories = (await getCollection("stories"))
    .filter((story) => !story.data.isDraft)
    .sort((a, b) => getUnixTime(b.data.pubDate) - getUnixTime(a.data.pubDate));
  return paginate(stories, { pageSize: 30 });
}
const { page } = Astro.props;
const totalPages = Math.ceil(page.total / page.size);
---

<GalleryLayout pageTitle="Stories">
  <h1 class="m-2 text-2xl font-semibold text-stone-800 dark:text-stone-100">Stories</h1>
  <p class="my-4">My main collection of content so far.</p>
  <p class="text-center font-light text-stone-950 dark:text-white">
    {
      page.start == page.end
        ? `Displaying story ${page.start + 1}`
        : `Displaying stories ${page.start + 1} - ${page.end + 1}`
    } / {page.total}
  </p>
  <div class="mx-auto mb-6 mt-2 flex w-fit rounded-lg border border-stone-400 dark:border-stone-500">
    {
      page.url.prev && (
        <a class="text-link border-r border-stone-400 px-2 py-1 underline dark:border-stone-500" href={page.url.prev}>
          Previous page
        </a>
      )
    }
    {
      [...Array(totalPages).keys()].map((p) =>
        p + 1 == page.currentPage ? (
          <span class="border-r border-stone-400 px-4 py-1 font-semibold text-stone-900 dark:border-stone-500 dark:text-stone-50">
            {p + 1}
          </span>
        ) : (
          <a class="text-link border-r border-stone-400 px-2 py-1 underline dark:border-stone-500" href={`./${p + 1}`}>
            {p + 1}
          </a>
        ),
      )
    }
    {
      page.url.next && (
        <a class="text-link px-2 py-1 underline" href={page.url.next}>
          Next page
        </a>
      )
    }
  </div>
  <ul class="flex flex-wrap justify-center gap-4 text-center md:justify-normal">
    {
      page.data.map((story) => (
        <li class="break-inside-avoid">
          <a class="text-link hover:underline focus:underline" href={`/stories/${story.slug}`}>
            {story.data.thumbnail && (
              <Image
                class="w-48"
                src={story.data.thumbnail}
                alt={`Thumbnail for ${story.data.title}`}
                width={story.data.thumbnailWidth}
                height={story.data.thumbnailHeight}
              />
            )}
            <div class="max-w-48 text-sm">
              <>
                <span>{story.data.title}</span>
                <br />
                <span class="italic">{formatDate(story.data.pubDate, "MMM d, yyyy", { locale: enUSLocale })}</span>
              </>
            </div>
          </a>
        </li>
      ))
    }
  </ul>
  <div class="mx-auto my-6 flex w-fit rounded-lg border border-stone-400 dark:border-stone-500">
    {
      page.url.prev && (
        <a class="text-link border-r border-stone-400 px-2 py-1 underline dark:border-stone-500" href={page.url.prev}>
          Previous page
        </a>
      )
    }
    {
      [...Array(totalPages).keys()].map((p) =>
        p + 1 == page.currentPage ? (
          <span class="border-r border-stone-400 px-4 py-1 font-semibold text-stone-900 dark:border-stone-500 dark:text-stone-50">
            {p + 1}
          </span>
        ) : (
          <a class="text-link border-r border-stone-400 px-2 py-1 underline dark:border-stone-500" href={`./${p + 1}`}>
            {p + 1}
          </a>
        ),
      )
    }
    {
      page.url.next && (
        <a class="text-link px-2 py-1 underline" href={page.url.next}>
          Next page
        </a>
      )
    }
  </div>
</GalleryLayout>