'use strict';

/**
 * Wraps the GUI
 * @class StartupView
 */
class StartupView {
    constructor() {
        const $ = document.querySelector.bind(document); // poor-mans jquery
        this._parent = $('#view-screen');
        this._content = $('#view-content');
        this._message = $('#view-message');
        this._mode = 'normal';
    }

    /**
     * Current developer mode, "developer", "int-developer", "normal"
     * @name mode
     * @type {String}
     */
    set mode(mode) {
        if (mode !== 'developer' && mode !== 'int-developer') {
            // handle other modes like oobe, normal, etc
            mode = 'normal';
        }
        this._mode = mode;
    }

    /**
     * Show the result
     * @method complete
     * @param {Error|String} [err] If an error was generated
     */
    complete(error) {
        this.replace(this._parent, 'mode-empty', 'mode-' + this._mode);
        if (error) {
            this.replace(this._content, 'status-loading', 'status-error');
            this._message.innerHTML = 'Failed startup: ' + error;
            return;
        }
        this.replace(this._content, 'status-loading', 'status-success');
        this._message.innerHTML = 'Waiting for skill to begin...';
    }

    /**
     * Simple class name find and replace
     * @method replace
     * @param {HTMLElement} node
     * @param {String} find
     * @param {String} replace
     */
    replace(node, find, replace) {
        node.className = node.className.replace(find, replace);
    }
}

module.exports = StartupView;