import React from 'react';
import type { Metadata } 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";

interface BlogPostPageParams {
    slug: 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
    }
}


function renderWidget (widget: Widget) {
    switch (widget.type){
        case 'widgetParagraph':
            return (
                <>
                    <h2 className="title-h2">
                        {widget.widget.subTitle}
                    </h2>
                    <RichText document={widget.widget.body} />
                </>
            )
        case 'widgetMedia':
            return (
                <img 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">
                        <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>
                    </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>
    );
};