import {
  h, useRef, useEffect, Component,
} from "atomico";
import marked from "marked";
import style from "./kun-page-markdown.css";
import { getComponentOrDefine } from "../../hooks/aync-hook/redirect";

const KunPageMarkdown = ({ content }): Component => {
  const ref = useRef();
  useEffect(() => {
    (ref.current as HTMLInputElement).innerHTML = marked(content || "");
  }, []);
  return (
    <host shadowDom>
      <style>{style}</style>

      <div>
        <div ref={ref} />
      </div>
    </host>
  );
};

KunPageMarkdown.props = {
  content: {
    type: String,
    value: "## h1 \n content\n",
    reflect: true,
    event: {
      type: "changeMessage",
    },
  },
};

export default getComponentOrDefine("kun-page-markdown", KunPageMarkdown);
