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



app.registerExtension({
    name: "hetima.SLPSingleLinePicker",
    commands: [
        {
            id: "hetima-slpsinglelinepicker-get-loras",
            label: "Get Lora List",
            icon: "pi pi-file-plus",
            tooltip: "Get Lora List",
            function: () => {
                const slp = Array.from(app.canvas.selectedItems)[0];
                slp?.listLoraFiles?.();
            }
        }
    ],
    getSelectionToolboxCommands: (selectedItem) => {
        // Return array of command IDs to show in the toolbox
        if (selectedItem.type == "HetimaSingleLinePicker") {
            return ["hetima-slpsinglelinepicker-get-loras"];
        }
        return [];
    },
    async beforeRegisterNodeDef(nodeType, nodeData, app) {
        if (nodeData.name === "HetimaSingleLinePicker") {
            const style = document.createElement("style");
            style.innerText = `
                .single-line-picker-container {
                    width: 100%;
                    height: 100%;
                    position: relative;
                    display: flex;
                    flex-direction: column;

                    overflow-x: hidden;
                    overflow-y: auto;
                    white-space: nowrap;

                    background-color: var(--bg-color);
                    color: var(--fg-color);
                }
                .single-line-picker-list-item {
                    cursor: default;
                    user-select: none;
                    padding: 3px;
                    font-size: 12px;
                }
                .single-line-picker-list-item-selected {
                    background-color: var(--fg-color);
                    color: var(--bg-color);
                }

            `;
            document.head.appendChild(style);

            const addListItem = function (container) {
                const itm = document.createElement("div");
                itm.className = "single-line-picker-list-item";
                container.appendChild(itm);
            };

            const setItemData = function (itm, label, realText) {
                itm.innerText = label;
                itm.dataset.realText = realText;
            }

            const selectItem = function (itm) {
                if (!itm.classList.contains("single-line-picker-list-item-selected")) {
                    itm.classList.add("single-line-picker-list-item-selected");
                }
            };

            const deselectItem = function (itm) {
                if (itm.classList.contains("single-line-picker-list-item-selected")){
                    itm.classList.remove("single-line-picker-list-item-selected");
                }
            };

            const selectedText = function (container) {
                var result = "";
                const lineCount = container.childElementCount;
                for (let index = 0; index < lineCount; index++) {
                    const div = container.children[index];
                    if (div.classList.contains("single-line-picker-list-item-selected")) {
                        if (result != "") {
                            result += "\n";
                        }
                        result += div.dataset.realText;
                    }
                }
                return result;
            }
            
            const selectedIndexes = function (container) {
                var result = "";
                const lineCount = container.childElementCount;
                for (let index = 0; index < lineCount; index++) {
                    const div = container.children[index];
                    if (div.classList.contains("single-line-picker-list-item-selected")) {
                        if (result != "") {
                            result += ",";
                        }
                        result += index.toString();
                    }
                }
                return result;
            }
            

            const onNodeCreated = nodeType.prototype.onNodeCreated;
            nodeType.prototype.onNodeCreated = function () {
                const ret = onNodeCreated ? onNodeCreated.apply(this, arguments) : undefined;
                const node = this;

                node.properties = node.properties || {};
                node.properties.selected_indexes = node.properties.selected_indexes || "";


                this.textListWidget = ComfyWidgets["STRING"](this, "source_text", ["STRING", { multiline: true }], app).widget;
                this.textListWidget.inputEl.readOnly = true;
                this.textListWidget.callback = async (v) => {
                    this.textListChanged();
                }
                this.textListWidget.hidden = true;

                this.selectedTextWidget = ComfyWidgets["STRING"](this, "selected_text", ["STRING", { multiline: true }], app).widget;
                this.selectedTextWidget.inputEl.readOnly = true;
                this.selectedTextWidget.hidden = true;

                // this.stemTextWidget = ComfyWidgets["STRING"](this, "stem", ["STRING", { multiline: false }], app).widget;
                // this.stemTextWidget.hidden = true;

                const container = document.createElement("div");
                container.className = "single-line-picker-container";
                // container.style.width = "100%";
                // container.style.height = "100%";
                // container.style.position = "relative";
                // container.style.display = "flex";
                // container.style.flexDirection = "column";
                // container.style.overflowX = "hidden";
                // container.style.overflowY = "auto";
                // container.style.whiteSpace = "nowrap";
                // container.style.background = "transparent";

                node.container = container;
                node.container.addEventListener('click', (e) => {
                    const lists = Array.from(e.currentTarget.children);
                    const clicked_index = lists.findIndex(list => list === e.target);
                    // -1 is deselect all
                    const lineCount = this.container.childElementCount;
                    for (let index = 0; index < lineCount; index++) {
                        const div = this.container.children[index];
                        if (index == clicked_index) {
                            selectItem(div);
                        }else{
                            deselectItem(div);
                        }
                    }
                    if (clicked_index > 0) {
                    }
                    node.selectionChanged(null);
                    e.stopPropagation();
                });

                node.listWidget = node.addDOMWidget("list", "TEXTLIST", container, {
                    serialize: false,
                    computeSize: () => {
                        const width = Math.max(node.size[0] || 200, 200);
                        const height = Math.max(node.size[1] || 200, 200);
                        return [width, height];
                    },
                });

                node.textListChanged();
                return ret;
            };

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

            nodeType.prototype.selectionChanged = function (forceValue = null) {
                if (forceValue === null) {
                    forceValue = selectedIndexes(this.container);
                } else {
                    const idxs = forceValue.split(",").map(str => parseInt(str, 10));
                    const lineCount = this.container.childElementCount;
                    for (let index = 0; index < lineCount; index++) {
                        const div = this.container.children[index];
                        if (idxs.includes(index)) {
                            selectItem(div);
                        } else {
                            deselectItem(div);
                        }
                    }
                }
                this.properties.selected_indexes = forceValue;
                const text = selectedText(this.container);
                this.selectedTextWidget.value = text;

                // const firstLine = text.split('\n')[0];
                // const stem = firstLine.substring(
                //     Math.max(firstLine.lastIndexOf("/"), firstLine.lastIndexOf("\\")) + 1,
                //     firstLine.lastIndexOf("."));
                // this.stemTextWidget.value = stem || firstLine;
            }

            nodeType.prototype.textListChanged = function () {
                if (!this.container) {
                    return;
                }

                const text = this.textListWidget.value;
                const texts = text.split('\n');
                let lineCount = texts.length;
                let dictMode = false;

                if (lineCount > 1 && texts[0].toUpperCase().startsWith("#DICT")) {
                    texts.shift();
                    lineCount--;
                    dictMode = true;
                }


                const needs = lineCount - this.container.childElementCount;
                if (needs > 0){
                    for (let index = 0; index < needs; index++) {
                        addListItem(this.container);
                    }
                } else if (needs < 0) {
                    for (let index = 0; index > needs; index--) {
                        this.container.lastElementChild.remove();
                    }
                }

                for (let index = 0; index < lineCount; index++) {
                    const div = this.container.children[index];
                    let realText = texts[index];
                    let label = texts[index];
                    if (dictMode) {
                        const items = texts[index].split(':');
                        if (items.length > 1) {
                            label = items.shift().trim();
                            realText = items.join(':').trim();
                        }
                    }

                    setItemData(div, label, realText);
                    deselectItem(div);
                }

                this.properties.selected_indexes = "";
                this.selectedTextWidget.value = "";
                // this.stemTextWidget.value = "";
                this.setDirtyCanvas(true);
            };

            nodeType.prototype.setTextList = function (texts) {
                var text = '';
                if (typeof texts === 'string') {
                    text = texts;
                } else {
                    for (let i = 0; i < texts.length; i++) {
                        text += texts[i];
                    }
                }
                if (this.textListWidget) {
                    if (this.textListWidget.value != text) {
                        this.textListWidget.value = text;
                    }
                }
            };

            nodeType.prototype.listLoraFiles = function () {
                async function fetchCheckpoints() {
                    try {
                        const response = await api.fetchApi("/models/loras");
                        if (!response.ok) {
                            throw new Error(`HTTP error! status: ${response.status}`);
                        }
                        return await response.json();
                    } catch (error) {
                        console.error("Failed to retrieve the model:", error);
                    }
                }

                fetchCheckpoints().then((value) => {
                    this.setTextList(value?.join?.("\n"));
                });
            };


            nodeType.prototype.onSerialize = function (info) {
                info.properties = {
                    source_text: this.textListWidget.value || "",
                    selected_indexes: this.properties.selected_indexes || ""
                };
                //info.widgets_values = [""];
            };

            nodeType.prototype.onConfigure = function (info) {
                this.properties = this.properties || {};

                if (info.properties) {
                    this.textListWidget.value = info.properties.source_text || ""; //call textListChanged()
                    this.properties.selected_indexes = info.properties.selected_indexes || "";
                }
                this.selectionChanged(this.properties.selected_indexes);
            };
        }
    },
});