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

                    // Reuse existing widget or create new one
                    if (this._audioWidget) {
                        // Update existing player
                        this._audioEl.src = src;
                        this._dlEl.href = src;
                        this._dlEl.download = audioInfo.filename;
                        this._dlEl.textContent = audioInfo.filename;
                    } else {
                        const container = document.createElement("div");
                        container.style.cssText = "padding:4px;";

                        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 = audioInfo.filename;
                        dl.style.cssText = "display:block;margin-top:2px;color:#8cf;font-size:10px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;";
                        container.appendChild(dl);

                        this._audioEl = audio;
                        this._dlEl = dl;
                        this._audioWidget = this.addDOMWidget("audio_preview", "dom", container, {
                            serialize: false,
                            hideOnZoom: false,
                        });
                        this._audioWidget.computeSize = () => [this.size[0], 70];
                        this.setSize([this.size[0], 150]);
                    }

                    app.graph.setDirtyCanvas(true);
                }
            };
        }
    },
});