import ngModule from '../../module';
import Component from '../../lib/component';
import './style.scss';

/**
 * A spinner to inform the user about loading process.
 */
export default class Spinner extends Component {
    constructor($element, $scope) {
        super($element, $scope);
        this._enable = false;
        this.spinner = $element[0].firstChild;
    }
    /**
     * Activates/deactivates the spinner.
     *
     * @param {Boolean} value %true to enable, %false to disable
     */
    set enable(value) {
        if (value)
            this.start();
        else
            this.stop();
    }
    /**
     * Returns the current spinner state.
     *
     * @return {Boolean} %true if it's enabled, %false otherwise
     */
    get enable() {
        return this._enable;
    }
    /**
     * Activates the spinner.
     */
    start() {
        this.spinner.style.display = 'block';
        this._enable = true;
    }
    /**
     * Deactivates the spinner.
     */
    stop() {
        this.spinner.style.display = 'none';
        this._enable = false;
    }
}
Spinner.$inject = ['$element', '$scope'];

export const component = {
    template: require('./spinner.html'),
    bindings: {
        enable: '='
    },
    controller: Spinner
};
ngModule.component('vnSpinner', component);