import html from "html";
import { ref, onMounted } from "vue";
import { marked, setOptions } from "../../lib/marked/marked.esm.js";
import mermaid from "../../lib/mermaid/mermaid.esm.min.mjs";
import hljs from "../../lib/highlightjs/highlight.min.js";

export default {
  template: html`<div ref="tplRef">
    <div class="source" style="display:none;"><slot /></div>
    <div class="markdown-body"></div>
  </div>`,
  props: {
    name: {
      default: null,
    },
  },
  setup(props) {
    const tplRef = ref(null);
    mermaid.initialize({ startOnLoad: false });
    let id = 0;
    onMounted(async () => {
      setOptions({
        highlight: function (code, lang) {
          if (lang === "mermaid") {
            return mermaid.mermaidAPI.render(`mermaid${id++}`, code, undefined);
          } else {
            const language = hljs.getLanguage(lang) ? lang : "plaintext";
            return hljs.highlight(code, { language }).value;
          }
        },
        langPrefix: "hljs language-",
      });
      let mdText = tplRef.value.querySelector(".source").innerText;
      if (props.name !== null) {
        const response = await fetch(`./assets/docs/${props.name}.md`);
        mdText = await response.text();
      }
      tplRef.value.querySelector(".markdown-body").innerHTML = marked(mdText);
      tplRef.value.querySelector(".source").remove();
    });
    return {
      tplRef,
    };
  },
};