import React, { useState, useEffect } from "react"
import marked from "marked"
import * as styles from "./index.module.scss"
import { NodeTree, addCatalogueNode, renderOneNode } from "./catalogue"

const MarkdownCatalogue: React.FC<{ body: string }> = ({ body }) => {
  let catalogueAnchors: string[] = []
  let catalogueNodeTree: NodeTree = []
  const [finallyNodeTree, setFinallyNodeTree] = useState<NodeTree>([])

  const renderer = {
    heading(text: string, level: number) {
      if (level > 4) return false // ####
      if (level < 2) return false // #
      const { anchors, nodeTree } = addCatalogueNode(
        text,
        level,
        catalogueAnchors,
        catalogueNodeTree
      )
      catalogueAnchors = anchors
      catalogueNodeTree = nodeTree
      return ""
    },
  }

  useEffect(() => {
    marked.use({ renderer })
    marked(body)
    setFinallyNodeTree(catalogueNodeTree)
  }, [body])

  return (
    <div className={styles.catalogue}>
      {renderOneNode(finallyNodeTree, finallyNodeTree, setFinallyNodeTree)}
    </div>
  )
}

export default MarkdownCatalogue