import { inspect } from "util";
import hjs from "highlight.js";
var counter = 0;
function getId() {
    return `id_${counter++}`;
}
function beginTab(title, out) {
    const id = getId();
    out.push(`<input class="tab-input" name="tabs" type="radio" id="${id}">`);
    out.push(`<label class=tab for="${id}">${title}</label>`);
    out.push(`<div class="panel">`);
}
function endTab(out) {
    out.push(`</div>`);
}
export async function renderBlock(block) {
    const { micromark } = await import("micromark");
    const out = [];
    switch (block.original.type) {
        case "title":
        case "paragraph": {
            out.push(micromark(block.original.text, { allowDangerousHtml: false }));
            break;
        }
        case "code": {
            const language = block.original.language;
            const varName = getId();
            const repr = JSON.stringify(block.representation, replacer, 1);
            out.push(`<script>var ${varName} = coerce(${repr});</script>`);
            if (block.original.fence.metadata.as) {
                out.push(`<script>var ${block.original.fence.metadata.as} = ${varName};</script>`);
            }
            if (language == "css") {
                out.push(`<style>${block.original.code}</style>`);
            }
            if (block.original.fence.metadata.omit) {
                if (language == "js") {
                    out.push(`<script>${block.original.code}</script>`);
                }
                break;
            }
            out.push('<form class="tabs">');
            if (language == "js") {
                const id = getId();
                beginTab("Visualization", out);
                out.push(`<div id="${id}"></div>`);
                out.push(`<script>;var $container = document.getElementById("${id}");</script>`);
                out.push(`<script>${block.original.code}</script>`);
                endTab(out);
            }
            if (block.original.fence.metadata.table != "false") {
                if (block.representation) {
                    beginTab("Result", out);
                    const id = getId();
                    if (Array.isArray(block.representation) && block.representation.length) {
                        out.push(`
              <div id="${id}"></div>
              <script>;
                var $container = document.getElementById("${id}");
                var opts = {
                  // width: {
                  //   culmen_length_mm: 140,
                  //   culmen_depth_mm: 140,
                  //   flipper_length_mm: 140
                  // },
                  // align: {
                  //   culmen_length_mm: "right",
                  //   culmen_depth_mm: "center",
                  //   flipper_length_mm: "left"
                  // },
                  rows: 18,
                  // maxWidth: 840,
                  multiple: false,
                  layout: "auto"
                }
                $container.appendChild(Inputs.table(${varName}, opts));
              </script>`);
                    }
                    else {
                        out.push(`<pre>${inspect(block.representation, false, 100).replace(/</g, "&lt;").replace(/>/g, "&gt;")}</pre>`);
                    }
                    endTab(out);
                }
            }
            {
                try {
                    const result = hjs.highlight(block.original.code, { language });
                    beginTab("Source", out);
                    out.push(`<pre x-language="${result.language}">`, result.value, `</pre>`);
                    endTab(out);
                }
                catch (err) {
                    beginTab("Source", out);
                    out.push(`<pre x-language="${language}">`, block.original.code, `</pre>`);
                    endTab(out);
                    beginTab("ERROR", out);
                    out.push(`<div class="error">${err}</div>`);
                    endTab(out);
                }
            }
            out.push("</form>");
            break;
        }
    }
    return out.join("\n");
}
function replacer(key, value) {
    if (value && value instanceof Date) {
        return value.toISOString();
    }
    else if (typeof value === "bigint") {
        return value.toString();
    }
    else {
        return value;
    }
}
//# sourceMappingURL=render.mjs.map