import { app } from "../../../scripts/app.js";
import { ComfyWidgets } from "../../../scripts/widgets.js";

app.registerExtension({
    name: "ProportionChanger.PoseKeypointPreview",
    async beforeRegisterNodeDef(nodeType, nodeData, app) {
        if (nodeData.name === "PoseKeypointPreview") {
            function populate(text) {
                if (this.widgets) {
                    // Remove all display widgets (keep only the first widget which is pretty_format)
                    for (let i = this.widgets.length - 1; i >= 1; i--) {
                        this.widgets[i].onRemove?.();
                    }
                    this.widgets.length = 1;
                }

                if (text && text.length > 0) {
                    const textValue = Array.isArray(text) ? text[0] : text;
                    const w = ComfyWidgets["STRING"](this, "pose_json", ["STRING", { multiline: true }], app).widget;
                    w.inputEl.readOnly = true;
                    w.inputEl.style.opacity = 0.6;
                    w.value = textValue;
                }

                requestAnimationFrame(() => {
                    const sz = this.computeSize();
                    if (sz[0] < this.size[0]) {
                        sz[0] = this.size[0];
                    }
                    if (sz[1] < this.size[1]) {
                        sz[1] = this.size[1];
                    }
                    this.onResize?.(sz);
                    app.graph.setDirtyCanvas(true, false);
                });
            }

            const onExecuted = nodeType.prototype.onExecuted;
            nodeType.prototype.onExecuted = function (message) {
                onExecuted?.apply(this, arguments);
                if (message.text) {
                    populate.call(this, message.text);
                }
            };

            const VALUES = Symbol();
            const configure = nodeType.prototype.configure;
            nodeType.prototype.configure = function () {
                this[VALUES] = arguments[0]?.widgets_values;
                return configure?.apply(this, arguments);
            };

            const onConfigure = nodeType.prototype.onConfigure;
            nodeType.prototype.onConfigure = function () {
                onConfigure?.apply(this, arguments);
                const widgets_values = this[VALUES];
                if (widgets_values?.length) {
                    // Skip pretty_format widget value (first element), only pass display data
                    requestAnimationFrame(() => {
                        populate.call(this, widgets_values.slice(1));
                    });
                } else {
                    requestAnimationFrame(() => {
                        populate.call(this, ["Ready to display POSE_KEYPOINT JSON..."]);
                    });
                }
            };
        }
    },
});