import HeroImage from "@/components/HeroImage";
import { fetchBlogDetail } from "@/services/payload/blog";
import { getDefaultMetadata } from "@/utils/metadata";
import { RichText } from "@payloadcms/richtext-lexical/react";
import { Metadata } from "next";
import { headers } from "next/headers";
import Image from "next/image";
import { notFound } from "next/navigation";

const metaDesc =
  "Explore the latest insights, news, and resources on the Dynamic Realty blog. Read our articles today.";

export async function generateMetadata(props: { params: Promise<{ slug: string }> }): Promise<Metadata> {
  const metadata = await getDefaultMetadata();
  const params = await props.params;

  let title = "Page";
  let description = "Page";
  let publishedAt = "";
  let updatedAt = "";
  let imgUrl = "";
  let createdByName = "";
  let canonicalUrl = "";

  const blog = await fetchBlogDetail(params.slug);
  if (!!blog) {
    // check for blog data
    title = `${!!blog.data?.meta?.title ? blog.data?.meta?.title : blog.data.title} - ${metadata.openGraph?.siteName}`;
    description = `${!!blog.data?.meta?.description ? blog.data?.meta?.description : blog.data.title}`;
    imgUrl = blog.img.url;
    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 ?? "";
    }
  }

  metadata.title = title;
  metadata.description = description;
  if (!!metadata.openGraph) {
    // @ts-ignore
    metadata.openGraph.type = "article";
    metadata.openGraph.title = title;
    metadata.openGraph.description = description;
    metadata.openGraph.images = !!imgUrl ? [imgUrl] : undefined;
  }
  if (!!metadata.alternates && !!canonicalUrl) {
    metadata.alternates.canonical = canonicalUrl;
  }
  metadata.twitter = {
    card: "summary_large_image",
    title: title,
    description: description,
    images: !!imgUrl ? [imgUrl] : undefined,
  };
  metadata.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 metadata;
}

export default async function BlogDetail(props: { params: Promise<{ slug: string }> }) {
  const params = await props.params;
  const headersList = await headers();
  const fullUrl = headersList.get("x-full-url");
  const blog = await fetchBlogDetail(params.slug);
  if (!blog) return notFound();

  const shareUrl = {
    facebook: `https://www.facebook.com/sharer/sharer.php?u=${fullUrl}`,
    linkedin: `https://www.linkedin.com/sharing/share-offsite/?url=${fullUrl}`,
    twitter: `https://twitter.com/intent/tweet?url=${fullUrl}`,
  };

  return (
    <>
      <HeroImage title={blog.data.title} />

      <section className="section section-md bg-colorSection1">
        <div className="container">
          <div className="row justify-content-lg-center">
            <div className="col-lg-8">
              <article className="blog-post-solo">
                <div className="blog-post-solo-part">
                  <div className="w-full h-56 md:h-80 bg-colorImgPlaceholder/50 relative">
                    <Image className="object-cover" src={blog.img.url} alt={blog.img.alt} fill />
                  </div>

                  <RichText className="mt-4" data={blog.data.content} />
                </div>

                <div className="blog-post-solo-footer">
                  <div className="blog-post-solo-footer-left">
                    <ul className="blog-post-solo-footer-list">
                      <li>
                        <span className="icon mdi mdi-clock"></span>
                        <a href="#">{blog.createdAt}</a>
                      </li>
                    </ul>
                  </div>
                  <div className="blog-post-solo-footer-right">
                    <ul className="blog-post-solo-footer-list-1">
                      <li>
                        <span>Share this post</span>
                      </li>
                      <li>
                        <a className="icon icon-circle icon-rounded icon-5 fa-facebook" href={shareUrl.facebook}></a>
                      </li>
                      <li>
                        <a className="icon icon-circle icon-rounded icon-6 fa-twitter" href={shareUrl.twitter}></a>
                      </li>
                      <li>
                        <a className="icon icon-circle icon-rounded icon-4 fa-linkedin" href={shareUrl.linkedin}></a>
                      </li>
                    </ul>
                  </div>
                </div>
                <div className="post-simple-group">
                  <div className="post-simple-group-title">
                    <h6>Recent Posts</h6>
                  </div>
                  <div className="post-simple-group-divider"></div>
                  <div className="row row-30">
                    <div className="col-sm-6">
                      <article className="post-simple">
                        <div className="post-simple-img">
                          <Image src="/images/blog-post-03-736x540.jpg" alt="" width="736" height="540" />
                        </div>
                        <div className="post-simple-body">
                          <div className="post-simple-title">
                            <h4>
                              <a href="#">Turks and Caicos Villa to be Sold for Record $7.6M</a>
                            </h4>
                          </div>
                          <div className="post-simple-time">
                            <span className="icon mdi mdi-clock"></span>
                            <a className="time" href="#">
                              March 15, 2021
                            </a>
                          </div>
                        </div>
                      </article>
                    </div>
                    <div className="col-sm-6">
                      <article className="post-simple">
                        <div className="post-simple-img">
                          <Image src="/images/blog-post-04-736x540.jpg" alt="" width="736" height="540" />
                        </div>
                        <div className="post-simple-body">
                          <div className="post-simple-title">
                            <h4>
                              <a href="#">How We Build a Better LA for Fifth Year in a Row</a>
                            </h4>
                          </div>
                          <div className="post-simple-time">
                            <span className="icon mdi mdi-clock"></span>
                            <a className="time" href="#">
                              March 15, 2021
                            </a>
                          </div>
                        </div>
                      </article>
                    </div>
                  </div>
                </div>
              </article>
            </div>

            {/* Sidebar */}
            <div className="col-lg-4">
              <div className="pdl-xl-40">
                <div className="row row-60">
                  <div className="col-md-6 col-lg-12">
                    <form action="/blog" className="form-lg rd-search rd-search-classic">
                      <div className="form-wrap">
                        <input
                          className="form-input"
                          id="rd-search-form-input"
                          type="text"
                          name="s"
                          autoComplete="off"
                          placeholder="Search blog..."
                        />
                      </div>
                      <button className="rd-search-submit" type="submit"></button>
                    </form>
                  </div>
                  <div className="col-md-6 col-lg-12">
                    <div className="block-info-2">
                      <div className="block-info-2-title">
                        <h3>Latest Listings</h3>
                      </div>
                      <a className="post-minimal-1" href="#">
                        <div className="post-minimal-1-left">
                          <Image src="/images/post-agent-01-212x208.jpg" alt="" width="212" height="208" />
                        </div>
                        <div className="post-minimal-1-body">
                          <div className="post-minimal-1-title">
                            <span>401 Biscayne Blvd</span>
                          </div>
                          <div className="post-minimal-1-text">
                            <span>$5000\mo</span>
                          </div>
                        </div>
                      </a>
                      <a className="post-minimal-1" href="#">
                        <div className="post-minimal-1-left">
                          <Image src="/images/post-agent-02-212x208.jpg" alt="" width="212" height="208" />
                        </div>
                        <div className="post-minimal-1-body">
                          <div className="post-minimal-1-title">
                            <span>35 Pond St, New York</span>
                          </div>
                          <div className="post-minimal-1-text">
                            <span>$5550\mo</span>
                          </div>
                        </div>
                      </a>
                      <a className="post-minimal-1" href="#">
                        <div className="post-minimal-1-left">
                          <Image src="/images/post-agent-03-212x208.jpg" alt="" width="212" height="208" />
                        </div>
                        <div className="post-minimal-1-body">
                          <div className="post-minimal-1-title">
                            <span>182 3rd St, Seattle</span>
                          </div>
                          <div className="post-minimal-1-text">
                            <span>$2520\mo</span>
                          </div>
                        </div>
                      </a>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>
    </>
  );
}