import ngModule from '../../module';
import './style.scss';

export default class IconButton {
    constructor($element) {
        this.element = $element[0];

        if (this.element.getAttribute('tabindex') == null)
            this.element.tabIndex = 0;

        this.element.addEventListener('keyup', e => this.onKeyup(e));
        this.element.addEventListener('click', e => this.onClick(e));
    }

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

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

        // FIXME: Don't use Event.stopPropagation()
        let button = this.element.querySelector('button');
        if (this.disabled || button.disabled)
            event.stopImmediatePropagation();
    }
}

IconButton.$inject = ['$element'];
ngModule.component('vnIconButton', {
    controller: IconButton,
    template: require('./icon-button.html'),
    bindings: {
        icon: '@',
        disabled: '<?'
    }
});