import { createElement, Fragment, useMemo } from 'react';
import { unified } from 'unified';
import rehypeParse from 'rehype-parse';
import rehypeReact from 'rehype-react';
import remarkParse from 'remark-parse';
import remarkGfm from 'remark-gfm';
import rehypeMinifyWhitespace from 'rehype-minify-whitespace';
import remarkRehype from 'remark-rehype';
import rehypeStringify from 'rehype-stringify';
import remarkCustomSpan from '../remark-custom-span';
import Node from '../Node';
const components = {
  h1: Node,
  h2: Node,
  h3: Node,
  h4: Node,
  h5: Node,
  h6: Node,
  p: Node,
  blockquote: Node,
  ol: Node,
  ul: Node,
  li: Node,
  a: Node,
  img: Node,
  em: Node,
  strong: Node,
  code: Node,
  span: Node
};
const markdownParser = unified().use(remarkParse).use(remarkGfm).use(remarkCustomSpan).use(remarkRehype).use(rehypeMinifyWhitespace).use(rehypeStringify);
const htmlParser = unified().use(rehypeParse, {
  fragment: true
}).use(rehypeReact, {
  createElement,
  Fragment,
  components,
  passNode: true
});
const useRenderedText = function useRenderedText(text) {
  const content = useMemo(() => {
    const html = markdownParser.processSync(text);
    const jsx = htmlParser.processSync(html.value);
    return jsx.result.props.children;
  }, [text]);
  return content;
};
export default useRenderedText;