import ngModule from '../../module';
import FormInput from '../form-input';
import './style.scss';

export default class Button extends FormInput {
    constructor($element, $scope) {
        super($element, $scope);
        this.design = 'colored';
        this.initTabIndex();
        this.element.addEventListener('keyup', e => this.onKeyup(e));
        this.element.addEventListener('click', e => this.onClick(e));
        this.button = this.element.querySelector('button');
    }

    $onInit() {
        this.element.classList.add(this.design);
        if (!this.type) this.type = 'button';
    }

    onKeyup(event) {
        if (event.defaultPrevented) return;
        switch (event.key) {
        case ' ':
        case 'Enter':
            if (this.button)
                return this.button.click();
            return this.element.click();
        }
    }

    onClick(event) {
        if (this.disabled) {
            event.preventDefault();
            event.stopImmediatePropagation();
        }
    }
}
Button.$inject = ['$element', '$scope'];

ngModule.vnComponent('vnButton', {
    controller: Button,
    template: require('./index.html'),
    bindings: {
        icon: '@?',
        type: '@?'
    }
});