import { createElementEvent } from "./rdtkview.js";
export function render(data, width, height, scale = 2.0) {
    const canvas = document.createElement("div");
    let objs = [];
    try {
        objs = JSON.parse(`[${data}]`);
        canvas.innerHTML = "";
    } catch (e) {
        canvas.innerHTML =
            `<div style="color: red; font-weight: bold;">JSON解析错误：${e.message}</div>`;
        return canvas;
    }
    const eventStyle = { "scale": scale, "showDuration": false };
    const elems = [];
    for (let obj of objs) {
        const style = { ...eventStyle, enabled: obj.active ?? true };
        const elem = createElementEvent(obj, style);
        if (!elem) continue;
        elem.eventStyle = style;
        elem.style.position = "absolute";
        elem.style.left = `${
            ((((obj.bar ?? 1) - 1) * 8) + (obj.beat ?? 1) - 1) * 14 *
            scale
        }px`;
        elem.style.top = `${(obj.y ?? obj.row ?? 0) * 14 * scale}px`;
        elem.addEventListener("mousedown", (event) => {
            const eStyle = elem.eventStyle;
            eStyle.active = true;
            elem.onStateChange(eStyle);
        });
        elem.addEventListener("mouseover", (event) => {
            const eStyle = elem.eventStyle;
            eStyle.hover = true;
            elem.onStateChange(eStyle);
        });
        elem.addEventListener("mouseout", (event) => {
            const eStyle = elem.eventStyle;
            eStyle.hover = false;
            eStyle.active = false;
            elem.onStateChange(eStyle);
        });
        elem.addEventListener("mouseup", (event) => {
            const eStyle = elem.eventStyle;
            eStyle.active = false;
            elem.onStateChange(eStyle);
        });
        elems.push(elem);
    }
    canvas.style.position = "relative";
    canvas.style.width = `${width * 14 * scale}px`;
    canvas.style.height = `${height * 14 * scale}px`;
    elems.forEach((elem) => {
        canvas.appendChild(elem);
    });
    return canvas;
}

window.$docsify.plugins = [].concat(window.$docsify.plugins, (hook) => {
    hook.doneEach(() => {
        const pres = document.querySelectorAll("pre");
        pres.forEach((codeBlock) => {
            const lang = codeBlock.getAttribute("data-lang") || "";
            if (lang.startsWith("rdtkview")) {
            const code = codeBlock.querySelector("code").innerText || "";
                const args = lang.slice(8).trim().split(" ");
                const width = parseInt(args[0]) || 8;
                const height = parseInt(args[1]) || 4;
                const scale = parseFloat(args[2]) || 2.0;
                const result = render(code, width, height, scale);
                const parent = document.createElement("div");
                parent.style.width = 100 + "%";
                parent.style.display = "flex";
                parent.style.justifyContent = "center";
                parent.appendChild(result);
                codeBlock.replaceWith(parent);
            }
        });
    });
});