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

app.registerExtension({
    name: "CompassImageLoader",

    async beforeRegisterNodeDef(nodeType, nodeData) {
        if (nodeData.name !== "CompassImageLoader") return;

        const origOnNodeCreated = nodeType.prototype.onNodeCreated;
        nodeType.prototype.onNodeCreated = function () {
            if (origOnNodeCreated) origOnNodeCreated.apply(this, []);

            const directoryWidget = this.widgets.find(
                (w) => w.name === "directory"
            );
            if (!directoryWidget) return;

            directoryWidget._all_values = [...(directoryWidget.options.values || [])];

            try {
                if (typeof this.addDOMWidget === "function") {
                    const inputEl = document.createElement("input");
                    inputEl.type = "text";
                    inputEl.value = directoryWidget.value;

                    inputEl.addEventListener("change", () => {
                        const filter = inputEl.value.toLowerCase();
                        const filtered = directoryWidget._all_values.filter((v) =>
                            v.toLowerCase().includes(filter)
                        );
                        directoryWidget.options.values = filtered;
                        directoryWidget.value = filtered[0] || "";
                        this.onResize?.();
                    });

                    const dropdownEl = document.createElement("div");
                    dropdownEl.style.overflowY = "auto";
                    dropdownEl.style.maxHeight = "200px";

                    const listEl = document.createElement("ul");
                    listEl.style.padding = "4px";
                    listEl.style.margin = "0";
                    listEl.style.background = "#333";

                    inputEl.addEventListener("focus", () => {
                        listEl.innerHTML = "";
                        directoryWidget._all_values.forEach((v) => {
                            const li = document.createElement("li");
                            li.textContent = v;
                            li.style.padding = "4px 8px";
                            li.style.cursor = "pointer";
                            li.addEventListener("click", () => {
                                inputEl.value = v;
                                directoryWidget.value = v;
                                listEl.innerHTML = "";
                            });
                            listEl.appendChild(li);
                        });
                    });

                    inputEl.addEventListener("blur", (e) => {
                        setTimeout(() => {
                            if (!listEl.contains(e.relatedTarget)) {
                                listEl.innerHTML = "";
                            }
                        }, 0);
                    });

                    const textWidget = this.addDOMWidget(
                        "directory_filter",
                        "Directory Filter",
                        inputEl,
                        {},
                        { widget: directoryWidget }
                    );
                    textWidget.computeSize = () => [1, 40];
                }
            } catch (e) {
                console.warn("[CompassImageLoader] Widget setup failed:", e);
            }
        };
    },

    async loadedGraphNode(node) {
        if (node.type !== "CompassImageLoader") return;
        
        const directoryWidget = node.widgets?.find((w) => w.name === "directory");
        if (!directoryWidget) return;

        setTimeout(() => {
            try {
                app.api.addWebSocketMessageEventListener("fresh-node-defs", (event) => {
                    const defs = event.detail || {};
                    const compassDef = defs["CompassImageLoader"];
                    if (!compassDef) return;

                    const dirs = compassDef.input?.required?.directory;
                    if (!dirs || !Array.isArray(dirs)) return;

                    directoryWidget._all_values = [...dirs];
                    directoryWidget.options.values = [...dirs];

                    if (!directoryWidget._all_values.includes(directoryWidget.value)) {
                        directoryWidget.value = directoryWidget._all_values[0] || "";
                    }
                });
            } catch (e) {
                console.warn("[CompassImageLoader] Refresh listener failed:", e);
            }
        }, 100);
    },

    async getCustomWidgets() {
        return null;
    }
});