---
import type { InferGetStaticParamsType, InferGetStaticPropsType } from 'astro';
import DefaultPageLayout from "../../layouts/default.astro";
import PostPreview from "../../components/PostPreview.astro";
import { getAllPosts, getAllTags, getSettings, invariant } from "@matthiesenxyz/astro-ghostcms/api";
import { getGhostImgPath } from "../../utils";

export async function getStaticPaths() {
  const posts = await getAllPosts();
  const { tags } = await getAllTags();
  const settings = await getSettings();

  return tags.map((tag) => {
    const filteredPosts = posts.filter((post) =>
      post.tags?.map((tag) => tag.slug).includes(tag.slug)
    );
    return {
      params: { slug: tag.slug },
      props: {
        posts: filteredPosts,
        settings,
        tag,
      },
    };
  });
}

export type Params = InferGetStaticParamsType<typeof getStaticPaths>;
export type Props = InferGetStaticPropsType<typeof getStaticPaths>;

const { posts, settings, tag } = Astro.props;
invariant(settings, 'Settings not found');
const title = `Posts by Tag: ${tag.name}`;
const description = `all of the articles we've posted and linked so far under the tag: ${tag.name}`;
---

<DefaultPageLayout
  bodyClass={`tag-template tag-${tag.slug}`}
  content={{ title, description }}
  settings={settings}
>
  <main id="site-main" class="site-main outer">
    <div class="inner posts">
      <div class="post-feed">
        <section class="post-card post-card-large">
          {tag.feature_image && (
            <div class="post-card-image-link">
              <img
                class="post-card-image"
                srcset={`${getGhostImgPath(
                  settings.url,
                  tag.feature_image,
                  300
                )} 300w,
                          ${getGhostImgPath(
                            settings.url,
                            tag.feature_image,
                            600
                          )}  600w,
                          ${getGhostImgPath(
                            settings.url,
                            tag.feature_image,
                            1000
                          )}  1000w,
                          ${getGhostImgPath(
                            settings.url,
                            tag.feature_image,
                            2000
                          )} 2000w`}
                sizes="(max-width: 1000px) 400px, 800px"
                src={getGhostImgPath(settings.url, tag.feature_image, 600)}
                alt={tag.name}
                loading="lazy"
              />
            </div>
          )}
          <div class="post-card-content">
            <div class="post-card-content-link">
              <header class="post-card-header">
                <div class="post-card-primary-tag">Tagged</div>
                <h2 class="post-card-title">{tag.name}</h2>
              </header>
              <div class="post-card-excerpt">
                <p>
                  {tag.description
                    ? tag.description
                    : `A collection of ${tag.count?.posts || 0 } Post${
                        tag.count?.posts ?? 0 > 1 ? "s" : ""
                      }`}
                </p>
              </div>
            </div>
          </div>
        </section>
        {posts.map((post, index) => (
          <PostPreview post={post} index={index} settings={settings} />
        ))}
      </div>
    </div>
  </main>
</DefaultPageLayout>
