"use strict";

Toolkit.TextBox = class TextBox extends Toolkit.Component {

    constructor(application, options) {
        super(application, "input", options);
        options = options || {};

        // Configure instance fields
        this.changeListeners = [];
        this.commitListeners = [];
        this.enabled         = "enabled" in options ? !!options.enabled : true;
        this.name            = options.name || "";
        this.lastCommit      = "";

        // Configure element
        this.element.size = 1;
        this.element.type = "text";
        this.element.addEventListener("blur"   , e=>this.commit   (e));
        this.element.addEventListener("input"  , e=>this.onchange (e));
        this.element.addEventListener("keydown", e=>this.onkeydown(e));

        // Configure properties
        this.setEnabled(this.enabled);
        this.setName   (this.name   );
        this.setText   (options.text || "");
        this.application.addComponent(this);
    }



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

    // Add a callback for change events
    addChangeListener(listener) {
        if (this.changeListeners.indexOf(listener) == -1)
            this.changeListeners.push(listener);
    }

    // Add a callback for commit events
    addCommitListener(listener) {
        if (this.commitListeners.indexOf(listener) == -1)
            this.commitListeners.push(listener);
    }

    // Request focus on the appropriate element
    focus() {
        this.element.focus();
    }

    // Retrieve the component's accessible name
    getName() {
        return this.name;
    }

    // Retrieve the component's display text
    getText() {
        return this.element.value;
    }

    // Determine whether the component is enabled
    isEnabled() {
        return this.enabled;
    }

    // Specify whether the component is enabled
    setEnabled(enabled) {
        this.enabled = enabled = !!enabled;
        this.element.setAttribute("aria-disabled", !enabled);
        if (enabled)
            this.element.removeAttribute("disabled");
        else this.element.setAttribute("disabled", "");
    }

    // Specify the component's accessible name
    setName(name) {
        this.name = name || "";
        this.localize();
    }

    // Specify the component's display text
    setText(text) {
        text = !text && text !== 0 ? "" : "" + text;
        this.lastCommit    = text;
        this.element.value = text;
    }



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

    // Update display text with localized strings
    localize() {
        let name = this.name;
        if (this.application)
            name = this.application.translate(name, this);
        this.element.setAttribute("aria-label", name);
    }



    ///////////////////////////// Private Methods /////////////////////////////

    // Input finalized
    commit(e) {
        let text = this.element.value || "";
        if (!this.enabled || text == this.lastCommit)
            return;
        this.lastCommit = text;
        for (let listener of this.commitListeners)
            listener(e, this);
    }

    // Text changed event handler
    onchange(e) {
        e.stopPropagation();
        if (!this.enabled)
            return;
        for (let listener of this.changeListeners)
            listener(e, this);
    }

    // Key press event handler
    onkeydown(e) {

        // Configure event
        e.stopPropagation();

        // Error checking
        if (!this.enabled)
            return;

        // The Enter key was pressed
        if (e.key == "Enter")
            this.commit(e);
    }

};