/* 
  This is the blog page.
  It contains the following components:
  - Breadcrumb
  - BlogDetails
  It also contains the following logic:
  - Get blog details from server side API
  - Prepare breadcrumb data based on referrer
*/
import { getDictionarys } from '@/getDictionarys';
import Breadcrumb from '@/src/components/Breadcrumb';
import BlogDetails from '@/src/components/page/Blog/BlogDetails';
import getBlogDetails from '@/src/ssrapi/getBlogDetails';
import { BlogResponse } from '@/src/types/api/blog.type';
import { BlogContent } from '@/src/types/StaticContent/blog.content.type';
import { getCapitalizeHyphenated, isValidOGType } from '@/src/utils/commonFunctions';
import Routes from '@/src/utils/RouteConstants';
import { notFound } from 'next/navigation';
import React from 'react';

// Slug params  
interface SlugParams {
    params: {
        slug: string;
    };
    searchParams: { [key: string]: string | string[] | undefined };
}

export async function generateMetadata({ params }: SlugParams) {
    const { slug } = await params;

    // Fetch blog details from the server
    const blogDetails: BlogResponse = await getBlogDetails(slug);
    const metaKeywords = blogDetails?.data?.metaKeyWords?.join(', ') || '';

    return {
        title: blogDetails?.data?.metaTitle,
        description: blogDetails?.data?.metaDescription,
        keywords: metaKeywords,
        openGraph: {
            title: blogDetails?.data?.ogTitle,
            description: blogDetails?.data?.ogDescription,
            images: [
                {
                    url: blogDetails?.data?.ogImage?.imageUrl,
                    width: 1200,
                    height: 630,
                    alt: 'Blankbase',
                }
            ],
            url: `${process.env.NEXT_PUBLIC_WEBSITE_URL}/blog/${blogDetails?.data?.slug}`,
            type: isValidOGType(blogDetails?.data?.ogType) ? blogDetails?.data?.ogType : 'article',
            locale: 'en_US',
            site_name: 'Blankbase',
        },
        twitter: {
            card: 'summary_large_image',
            title: blogDetails?.data?.ogTitle,
            description: blogDetails?.data?.ogDescription,
            image: blogDetails?.data?.ogImage?.imageUrl,
            width: 1200,
            height: 628,
            creator: '@Blankbase',
            site: '@Blankbase',
        },
        author: 'Blankbase',
        robots: 'noindex, nofollow',
        alternates: {
            canonical: `${process.env.NEXT_PUBLIC_WEBSITE_URL}/blog/${blogDetails?.data?.slug}`,
        },
    };
}

const page: React.FC<SlugParams> = async ({ params, searchParams }) => {

    const BlogContent = await getDictionarys('blog') as BlogContent;

    //get slug from params
    const { slug } = await params;
    //get referrer from search params
    const searchParamsObj = await searchParams;
    //referrer can be home or blog for internal navigation
    const referrer = searchParamsObj.referrer as string;

    //get blog details from server side API
    const blogDetails: BlogResponse = await getBlogDetails(slug)

    //if no data found, then show not found page
    if (!blogDetails?.data) {
        notFound();
    }

    let breadcrumbData = [];
    //prepare breadcrumb data based on referrer
    if (referrer === BlogContent?.BREADCRUMB_DATA?.Home) {
        breadcrumbData = [
            {
                Link: BlogContent?.BREADCRUMB_DATA?.HOME,
                LinkUrl: Routes.HOME
            },
            {
                Link: BlogContent?.BREADCRUMB_DATA?.BLOG,
                LinkUrl: Routes.BLOG
            },
            {
                ActiveLink: getCapitalizeHyphenated(slug)
            }
        ]
    } else {
        breadcrumbData = [
            {
                Link: BlogContent?.BREADCRUMB_DATA?.BLOG,
                LinkUrl: Routes.BLOG
            },
            {
                ActiveLink: getCapitalizeHyphenated(slug)
            }
        ]
    }
    return (
        <>
            <section className={`main-mt`}>
                <div className={`container`}>
                    <Breadcrumb content={breadcrumbData} />
                    <BlogDetails BLOG_LIST={BlogContent?.BLOG_LIST} blogDetails={blogDetails?.data} />
                </div>
            </section>
        </>
    )
}

export default page;