import React, { useEffect, useState } from 'react'
import Markdoc, { type RenderableTreeNode } from '@markdoc/markdoc'
import { toMarkdocTree } from '../lib/markdoc'
import { CodeBlock } from './markdoc/CodeBlock.tsx'

export const MarkdocContent: React.FC<{
  content: string
}> = ({ content }) => {
  /* 注意一下这个元件是动态的 */
  const [tree, setTree] = useState<any>(null)

  useEffect(() => {
    let active = true
    toMarkdocTree(content).then((result) => {
      if (active) setTree(result)
    })
    return () => {
      active = false
    }
  }, [content])

  if (!tree) return <div className="loading">渲染中... (๑•̀ㅂ•́)و✧</div>

  return <MarkdocTreeRender tree={tree} />
}

export const MarkdocTreeRender: React.FC<{
  tree: RenderableTreeNode
}> = ({ tree }) => {
  return (
    <div className="markdoc-container prose">
      {Markdoc.renderers.react(tree, React, { components: { CodeBlock } })}
    </div>
  )
}