import React from 'react';
import type {Metadata, ResolvingMetadata} from 'next';
import { draftMode } from 'next/headers'
import { notFound } from 'next/navigation';
import {fetchBlogPost, fetchBlogPosts, Widget} from "../../../../lib/contentful/blogPosts";
import Util from "node:util";
import RichText from "../../../../lib/contentful/RichText";
import Link from "next/link";

interface BlogPostPageParams {
    slug: string
    locale: string
}

interface BlogPostPageProps {
    params: BlogPostPageParams
}

export async function generateMetadata({ params }: BlogPostPageProps, parent: ResolvingMetadata): Promise<Metadata> {
    const blogPost = await fetchBlogPost({ slug: params.slug, preview: draftMode().isEnabled })

    if (!blogPost) {
        return notFound()
    }

    return {
        title: blogPost.title,
        description: blogPost.metaDescription
    }
}


function renderWidget (widget: Widget, index: number) {
    switch (widget.type){
        case 'widgetParagraph':
            return (
                <div key={'widget'+index} >
                    <h2 className="title-h2">
                        {widget.widget.subTitle}
                    </h2>
                    <RichText document={widget.widget.body} />
                </div>
            )
        case 'widgetMedia':
            return (
                <img key={'widget'+index} src={widget.widget.file?.src}/>
            )
    }
}

export default async function BlogItem({params}: { params: BlogPostPageParams }) {
    const item = await fetchBlogPost({slug: params.slug, preview: draftMode().isEnabled })
    console.log('BLOG POST')
    console.log(Util.inspect(item, {showHidden: false, depth: null, colors: true}))
    if (!item) notFound();

    return (
        <div className="b-news-page">
            <div className="b-inner">
                <h1 className="b-news-page__title">{item.title}</h1>
                <div className="news-item__badge">{item.category}</div>
                <div className="b-news-page__text">

                </div>
                <div className="b-news-page__image">
                    <img className="" src="/images/news1.png" alt=""/>
                </div>
                <div className="news-item__info">
                    <div className="news-item__info__author">
                        <Link href={`/${params.locale}/experts/${item.author?.expertId}`} className="news-item">
                            <img className="" src={item.author.avatar.src} alt=""/>
                            <div className="news-item__info__author__inner">
                                <div className="news-item__info__name">{item.author?.name}</div>
                                <div className="news-item__info__date">{item.createdAt}</div>
                            </div>
                        </Link>
                    </div>
                    <div className="news-item__info__counter">
                        <div className="news-item__info__like">
                            <img className="" src="/images/heart-outline.svg" alt=""/>
                            165
                        </div>
                        <div className="news-item__info__share">
                            <img className="" src="/images/share-social.svg" alt=""/>
                            Share
                        </div>
                    </div>
                </div>
                <div className="b-news-page__inner">
                    {item.body.map(renderWidget)}
                </div>
            </div>
            <div className="b-inner" style={ {marginTop: '40px'}}>
                <nav className="min-h-6 pb-6">
                    <Link href='/'>
                        Home
                    </Link>
                    &nbsp;>&nbsp;
                    <Link href={`/${params.locale}/blog/category/${item.categorySlug}`}>
                        {item.category}
                    </Link>
                    &nbsp;>&nbsp;
                    <span>
                            {item.title}
                        </span>
                </nav>
            </div>

        </div>

    );
};