import { app } from "../../../scripts/app.js";
import { api } from "../../../scripts/api.js";

app.registerExtension({
    name: "AudioCraft.AudioPreview",
    async beforeRegisterNodeDef(nodeType, nodeData, app) {
        if (nodeData.name === "AudioPreview") {
            const onExecuted = nodeType.prototype.onExecuted;
            nodeType.prototype.onExecuted = function (message) {
                onExecuted?.apply(this, arguments);

                if (message?.audio) {
                    // Remove old players
                    const oldEl = this._audioElement;
                    if (oldEl) {
                        oldEl.remove();
                    }

                    const audioInfo = message.audio[0];
                    const src = api.apiURL(
                        `/view?filename=${encodeURIComponent(audioInfo.filename)}&subfolder=${encodeURIComponent(audioInfo.subfolder || "")}&type=${audioInfo.type}`
                    );

                    const container = document.createElement("div");
                    container.style.cssText = "padding:8px;";

                    const audio = document.createElement("audio");
                    audio.controls = true;
                    audio.style.width = "100%";
                    audio.src = src;
                    container.appendChild(audio);

                    const dl = document.createElement("a");
                    dl.href = src;
                    dl.download = audioInfo.filename;
                    dl.textContent = "Download: " + audioInfo.filename;
                    dl.style.cssText = "display:block;margin-top:4px;color:#8cf;font-size:11px;";
                    container.appendChild(dl);

                    this._audioElement = container;

                    // Add to node widget area
                    const widget = this.addDOMWidget("audio_preview", "dom", container, {
                        serialize: false,
                        hideOnZoom: false,
                    });
                    widget.computeSize = () => [this.size[0], 80];

                    this.setSize([this.size[0], Math.max(this.size[1], 160)]);
                    app.graph.setDirtyCanvas(true);
                }
            };
        }
    },
});