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.input = this.element.querySelector('button');

        let element = this.element;
        element.tabIndex = 0;
        element.classList.add('vn-button');
        this.element.addEventListener('keyup', e => this.onKeyup(e));
        this.element.addEventListener('click', e => this.onClick(e));
    }

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

    onKeyup(event) {
        if (event.code == 'Space')
            this.onClick(event);
    }

    onClick(event) {
        if (event.defaultPrevented) return;
        // event.preventDefault();

        // FIXME: Don't stop event propagation
        if (this.disabled) event.stopImmediatePropagation();
    }
}
Button.$inject = ['$element', '$scope'];

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