import Tagbar from "@/components/shared/news/tagbar";
import styles from "@/components/shared/news/article-preview.module.css"

import bg from "public/placeholder-square.png"
import { DOMElement, JSXElementConstructor, ReactNode } from "react"
import { Style } from "util";
import Link from "next/link";
import { redirect } from 'next/navigation';
import { Router } from "next/router";
import { useRouter } from 'next/navigation'
import { truncateString } from "@/util/strings";
// @ts-ignore
import { MDXRemote } from "next-mdx-remote/rsc";
import { ExampleComponent } from "./article";
import ReactDOM from "react-dom";
import renderToString from 'react-dom/server'
import { jsxToString } from "@/app/lib/jsxtostring";
// @ts-ignore
import remarkMdx from "remark-mdx";
// @ts-ignore
import { remark } from "remark";
// @ts-ignore
import strip from 'remark-mdx-to-plain-text';
import { Post } from "@/models";
import { Attributes } from "@sequelize/core";

type ArticlePreviewPost = Attributes<Post>
type Props = {
    post:ArticlePreviewPost;
}

export default async function ArticlePreview(props:Props){
    const components = { ExampleComponent }
    const content = ["import ExampleComponent from './article';\n",props.post.content].join('\n');
    let stripped = ''
    remark()
    .use(remarkMdx)
    .use(strip)
    .process(content, (err:any, file:any):any => {
        if (err) throw err
        // console.log(String(file));
        stripped=String(file)
        return String(file)
    } )
    console.log(stripped)

    // const parsedMDX = await MDXRemote({source:props.content,components:components});
    // const b = new ReactDOM.contain
    // const renderedMDX = ReactDOM.render(parsedMDX,)
    // console.log(eval(parsedMDX as any))
    // const a = jsxToString(renderedMDX);
    // console.log(parsedMDX);
    // if (!props.content)
    return ( 
        <section className={styles.previewbox}>
            <div className={styles.imagecontainer}></div>
            
            <div className={`${styles.summary} flex flex-col justify-between p-0`}>
                <section className="w-[100%]">
                    <span className="inline-block"><h2><Link href={`/article/${props.post.id}`}>{props.post.title}</Link></h2></span>
                    <p>{truncateString(props.post.description? props.post.description : "No Description",255)}</p>
                </section>
                <Tagbar/>
            </div>
        </section>
    );
}