import { BlogDetailContentSkeleton } from "@/components/Blogs/BlogDetail";
import HeroOther from "@/components/HeroOther";
import Page from "@/components/Pages/Page";
import { fetchBlogDetail } from "@/services/payload/blog";
import { fetchPageBySlug } from "@/services/payload/page";
import { getDefaultMetadata } from "@/utils/metadata";
import { Metadata } from "next";
import { Suspense } from "react";

export async function generateMetadata({ params }: { params: Promise<{ slug: string }> }): Promise<Metadata> {
  const defaultMetadata = await getDefaultMetadata();
  const name = defaultMetadata.openGraph?.siteName ?? "";
  let title = "Page";
  let description = "Page";
  let publishedAt = "";
  let updatedAt = "";
  let imgUrl = "";
  let createdByName = "";
  let canonicalUrl = "";

  const slug = (await params).slug;
  const blog = await fetchBlogDetail(slug);

  if (!!blog) {
    // check for blog data
    title = `${!!blog.data?.meta?.title ? blog.data?.meta?.title : blog.data.title} - ${name}`;
    description = `${!!blog.data?.meta?.description ? blog.data?.meta?.description : blog.data.title}`;
    imgUrl = blog.imgUrl;
    publishedAt = blog.data.createdAt;
    updatedAt = blog.data.updatedAt;
    if (!!blog.data?.meta?.canonical_url) {
      canonicalUrl = blog.data.meta.canonical_url;
    }
    if (!!blog?.data?.createdBy && typeof blog.data.createdBy !== "number") {
      createdByName = blog.data.createdBy?.name ?? "";
    }
  } else {
    // check for page data when blog is not found
    const page = await fetchPageBySlug({ slug });
    if (!!page) {
      title = `${!!page?.meta?.title ? page?.meta?.title : page.title} - ${name}`;
      description = `${!!page?.meta?.description ? page?.meta?.description : page.title}`;
      imgUrl = page.heroImg?.url;
      publishedAt = page.createdAt;
      updatedAt = page.updatedAt;
      if (!!page.meta?.canonical_url) {
        canonicalUrl = page.meta.canonical_url;
      }
      if (!!page?.createdBy && typeof page.createdBy !== "number") {
        createdByName = page?.createdBy?.name ?? "";
      }
    }
  }

  defaultMetadata.title = title;
  defaultMetadata.description = description;
  if (!!defaultMetadata.openGraph) {
    // @ts-ignore
    defaultMetadata.openGraph.type = "article";
    defaultMetadata.openGraph.title = title;
    defaultMetadata.openGraph.description = description;
    defaultMetadata.openGraph.images = !!imgUrl ? [imgUrl] : undefined;
  }
  if (!!defaultMetadata.alternates && !!canonicalUrl) {
    defaultMetadata.alternates.canonical = canonicalUrl;
  }
  defaultMetadata.twitter = {
    card: "summary_large_image",
    title: title,
    description: description,
    images: !!imgUrl ? [imgUrl] : undefined,
  };
  defaultMetadata.other = {
    "article:published_time": publishedAt,
    "article:modified_time": updatedAt,
    "twitter:label1": "Written by",
    "twitter:data1": !!createdByName ? createdByName : "Admin",
    "twitter:label2": "Est. reading time",
    "twitter:data2": "3 minutes",
  };

  return defaultMetadata;
}

export default async function SinglePage({ params }: { params: Promise<{ slug: string }> }) {
  const slug = (await params).slug;

  return (
    <>
      <Suspense fallback={<Loading />}>
        <Page slug={slug} />
      </Suspense>
    </>
  );
}

function Loading() {
  return (
    <>
      <HeroOther />
      {/* Section */}
      <BlogDetailContentSkeleton />
      {/* End Section */}
    </>
  );
}