import BlogContent from "@/sections/BlogContent";
import getPostMetadata from "@/utils/getPostMetaData";
import { headers } from "next/headers";
import React from "react";
import Spacer from "@/components/Utilities/Spacer";
import pb from "@/lib/pocketbase";
import Footer from "@/components/Footer";
import Background from "@/components/Utilities/Background";

export async function generateMetadata({
  params,
}: {
  params: { slug: string };
}) {
  const { slug } = params;
  const headersList = headers();
  const siteURL = headersList.get("host");
  pb.autoCancellation(false);
  const post = await pb.collection("blog").getFirstListItem(`slug="${slug}"`, {
    requestKey: "metaData",
  });
  pb.autoCancellation(true);

  return {
    title: `${post.title} | FastPocket`,
    authors: [
      {
        name: post.author || "Samuel Wyndham",
      },
    ],
    description: post.description,
    keywords: post.keywords,
    openGraph: {
      title: `${post.title} | FastPocket`,
      description: post.description,
      type: "article",
      url: `https://${siteURL}/blogs/${post.slug}`,
      publishedTime: post.created,
      modifiedTime: post.updated,
      authors: [`https://${siteURL}/about`],
      images: [
        {
          url: `${post.imageUrl}`,
          width: 1024,
          height: 576,
          alt: post.title,
          type: "image/png",
        },
      ],
    },
    twitter: {
      card: "summary_large_image",
      site: "@meinbiz",
      creator: "@meinbiz",
      title: `${post.title} | FastPocket`,
      description: post.description,
      images: [
        {
          url: `${post.imageUrl}`,
          width: 1024,
          height: 576,
          alt: post.title,
        },
      ],
    },
    alternates: {
      canonical: `https://${siteURL}/blogs/${post.slug}`,
    },
  };
}

export const generateStaticParams = async () => {
  const posts = await getPostMetadata();
  console.log("static posts", posts.length);
  const mappedPosts = posts.map((post) => ({
    slug: post.slug,
  }));
  return mappedPosts;
};

const PostPage = async (props: any) => {
  console.log("params", props.params);
  const post = await pb
    .collection("blog")
    .getFirstListItem(`slug="` + props.params.slug + `"`, {
      requestKey: "post",
    });
  return (
    <main
      id="content"
      role="main"
      className="h-full flex-grow flex flex-col bg-base-100 max-w-screen"
    >
      <Background>
        <div className="flex flex-col h-full w-full md:max-w-3xl md:mx-auto max-w-screen mb-8">
          <Spacer className="pt-32" />
          <BlogContent post={post} />
        </div>
        <Footer />
      </Background>
    </main>
  );
};

export default PostPage;