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";

export const metadata: Metadata = {
    title: 'Bbuddy - Blog item',
    description: 'Bbuddy desc blog item'
};

interface BlogPostPageParams {
    slug: string
}

interface BlogPostPageProps {
    params: BlogPostPageParams
}

export async function generateStaticParams(): Promise<BlogPostPageParams[]> {
    const blogPosts = await fetchBlogPosts({ preview: false })

    return blogPosts.map((post) => ({ slug: post.slug }))
}
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>
    );
};