import { spread, effect, className, style, template } from 'solid-js/web';
import { OriginComponent, extendsEvent } from '@cn-ui/use';
import { createResource } from 'solid-js';
import { unified } from 'unified';
import remarkParse from 'remark-parse';
import remarkRehype from 'remark-rehype';
import rehypeStringify from 'rehype-stringify';

const _tmpl$ = /*#__PURE__*/template(`<div></div>`, 2);
const Markdown = OriginComponent(props => {
  const [text] = createResource(async () => {
    let source = unified();
    const plugins = [remarkParse, ...(props.remarkPlugins || []), remarkRehype, ...(props.rehypePlugins || []), rehypeStringify];

    for (const i of plugins) {
      source = source.use(i);
    }

    return source.process(props.children).then(res => res.toString());
  });
  return (() => {
    const _el$ = _tmpl$.cloneNode(true);

    const _ref$ = props.ref;
    typeof _ref$ === "function" ? _ref$(_el$) : props.ref = _el$;

    spread(_el$, () => extendsEvent(props), false, false);

    effect(_p$ => {
      const _v$ = props.class(),
            _v$2 = props.style,
            _v$3 = text();

      _v$ !== _p$._v$ && className(_el$, _p$._v$ = _v$);
      _p$._v$2 = style(_el$, _v$2, _p$._v$2);
      _v$3 !== _p$._v$3 && (_el$.innerHTML = _p$._v$3 = _v$3);
      return _p$;
    }, {
      _v$: undefined,
      _v$2: undefined,
      _v$3: undefined
    });

    return _el$;
  })();
});

export { Markdown };
