let register = Toolkit => Toolkit.DropDown =

class DropDown extends Toolkit.Component {

    ///////////////////////// Initialization Methods //////////////////////////

    constructor(app, options = {}) {
        super(app, Object.assign({
            class: "tk drop-down",
            tag  : "select"
        }, options));

        // Configure instance fields
        this.items = [];
    }



    ///////////////////////////// Public Methods //////////////////////////////

    // Add an item
    add(text, localize, value) {

        // Record the item data
        this.items.push([ text, localize, value ]);

        // Add an <option> element
        let option = document.createElement("option");
        this.element.append(option);
        option.innerText = !localize ? text :
            this.app.localize(text, this.substitutions);
    }

    // Remove all items
    clear() {
        this.items.splice(0);
        this.element.replaceChildren();
        this.element.selectedIndex = -1;
    }

    // Retrieve an item
    get(index) {

        // Error checking
        if (index < 0 || index >= this.items.length)
            return null;

        // Return the item as an item with properties
        let item = this.items[item];
        return {
            localize: item[1],
            text    : item[0],
            value   : item[2]
        };
    }

    // Number of items in the list
    get length() { return this.items.length; }
    set length(v) { }

    // Remove an item
    remove(index) {

        // Error checking
        if (index < 0 || index >= this.length)
            return;

        // Determine what selectedIndex will be after the operation
        let newIndex = index;
        if (
            newIndex <= this.selectedIndex ||
            newIndex == this.length - 1
        ) newIndex--;
        if (
            newIndex    == -1 &&
            this.length != 0
        ) newIndex = 0;

        // Remove the item
        this.items.splice(index, 1);
        this.element.options[index].remove();
        this.element.selectedIndex = newIndex;
    }

    // Index of the currently selected item
    get selectedIndex() { return this.element.selectedIndex; }
    set selectedIndex(index) {
        if (index < -1 || index >= this.items.length)
            return this.element.selectedIndex;
        return this.element.selectedIndex = index;
    }

    // Update an item
    set(index, text, localize) {

        // Error checking
        if (index < 0 || index >= this.items.length)
            return;

        // Replace the item data
        this.items[index] = [ text, localize ];

        // Configure the <option> element
        this.element.options[index].innerText = !localize ? text :
            this.app.localize(text, this.substitutions);
    }

    // Update the selectedIndex property, firing an event
    setSelectedIndex(index) {

        // Error checking
        if (index < -1 || index >= this.items.length)
            return this.selectedIndex;

        // Update the element and fire an event
        this.element.selectedIndex = index;
        this.element.dispatchEvent(new Event("input"));
        return index;
    }

    // Currently selected value
    get value() {
        return this.selectedIndex == -1 ? null :
            this.items[this.selectedIndex][2];
    }
    set value(value) {
        let index = this.items.findIndex(i=>i[2] == value);
        if (index != -1)
            this.selectedIndex = index;
    }



    ///////////////////////////// Package Methods /////////////////////////////

    // Update localization strings
    localize() {

        // Label and title
        this.localizeLabel();
        this.localizeTitle();

        // Items
        for (let x = 0; x < this.items.length; x++) {
            let item = this.items[x];
            this.element.options[x].innerText = !item[1] ? item[0] :
                this.app.localize(item[0], this.substitutions);
        }

    }

}

export { register };