import { Extensions, IconStyle } from "/script/Extensions.js";
function rend() {
    const codeBlocks = document.querySelectorAll("canvas.rdview2-canvas");
    codeBlocks.forEach((block) => {
        const width = block.getAttribute("data-width") || 8;
        const height = block.getAttribute("data-height") || 4;
        const scale = block.getAttribute("data-scale") || 2;
        const data = block.getAttribute("data");
        const ctx = block.getContext("2d");
        block.width = width * scale * 14;
        block.height = height * scale * 14;
        if (!data) {
            return;
        }
        const jsonData = JSON.parse(`[${JSON.parse(data)}]`);
        
        let lastX = -1, lastY = -1, lastActive = false;
        let frameId = null;
        
        const style = new IconStyle();
        
        block.render = (x, y, active) => {
            if (x === lastX && y === lastY && active === lastActive) {
                return;
            }
            lastX = x;
            lastY = y;
            lastActive = active;
            
            ctx.clearRect(0, 0, block.width, block.height);
            for (const evt of jsonData) {
                style.Scale = scale;
                style.Hover = evt.area?.contains({x, y}) ?? false;
                style.Active = evt.area?.contains({x, y}) ? active : false;
                evt.area = Extensions.DrawEventIcon(ctx, evt, {
                    x: ((evt.beat ?? 1) - 1) * scale * 14,
                    y: (evt.y ?? 0) * scale * 14,
                }, style);
            }
        }
        
        const throttledRender = (x, y, active) => {
            if (frameId !== null) {
                cancelAnimationFrame(frameId);
            }
            frameId = requestAnimationFrame(() => {
                block.render(x, y, active);
                frameId = null;
            });
        }
        
        block.addEventListener("mousemove", (e) => {
            const rect = block.getBoundingClientRect();
            const x = e.clientX - rect.left;
            const y = e.clientY - rect.top;
            throttledRender(x, y, false);
        });
        block.addEventListener("mousedown", (e) => {
            const rect = block.getBoundingClientRect();
            const x = e.clientX - rect.left;
            const y = e.clientY - rect.top;
            block.render(x, y, true);
        });
        block.addEventListener("mouseup", (e) => {
            const rect = block.getBoundingClientRect();
            const x = e.clientX - rect.left;
            const y = e.clientY - rect.top;
            block.render(x, y, false);
        });
        block.addEventListener("mouseleave", (e) => {
            if (frameId !== null) {
                cancelAnimationFrame(frameId);
            }
            block.render(0, 0, false);
        });
        block.render(0, 0, false);
    });
}

window.$docsify.plugins = [].concat(window.$docsify.plugins, function (hook) {
    hook.doneEach(function () {
        rend();
    });
});