const ComboBoxWidget = (() => {
    let tempIdCounter = -1;

    function initComboBox(ns) {
        const input = document.querySelector(`#${ns}-input`);
        const list = document.querySelector(`#${ns}-list`);
        const addBtn = document.querySelector(`#${ns}-add`);
        const removeBtn = document.querySelector(`#${ns}-remove`);
        let currentlyEditing = null;

        if (!input || !list || !addBtn || !removeBtn) {
            console.warn(`ComboBoxWidget: Missing elements for namespace '${ns}'`);
            return;
        }

        function updateAddButtonIcon() {
            addBtn.innerHTML = currentlyEditing ? icons.edit : icons.add;
        }

        input.addEventListener('input', () => {
            addBtn.disabled = input.value.trim() === '';
        });

        list.addEventListener('change', () => {
            const selected = list.selectedOptions;
            removeBtn.disabled = selected.length === 0;

            if (selected.length === 1) {
                // Load the text into input for editing
                input.value = selected[0].textContent;
                addBtn.disabled = input.value.trim() === '';
                currentlyEditing = selected[0];
            } else {
                input.value = '';
                currentlyEditing = null;
                addBtn.disabled = true;
            }

            updateAddButtonIcon();
        });

        addBtn.addEventListener('click', () => {
            const newItem = input.value.trim();
            if (!newItem) return;
        
            if (currentlyEditing) {
                currentlyEditing.textContent = newItem;
                currentlyEditing = null;
            } else {
                const option = document.createElement('option');
                option.textContent = newItem;
                option.value = tempIdCounter--;
                list.appendChild(option);
            }
        
            input.value = '';
            addBtn.disabled = true;
            removeBtn.disabled = true;
            sortOptions(list);
        });

        removeBtn.addEventListener('click', () => {
            Array.from(list.selectedOptions).forEach(opt => opt.remove());
            currentlyEditing = null;
            removeBtn.disabled = true;
            input.value = '';
            addBtn.disabled = true;
        });
    }

    function sortOptions(selectElement) {
        const sorted = Array.from(selectElement.options)
            .sort((a, b) => a.text.localeCompare(b.text));
        selectElement.innerHTML = '';
        sorted.forEach(option => selectElement.appendChild(option));
    }

    return {
        initComboBox
    };
})();