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

/**
 * Base component with common logic and styles for checkbox and radio button.
 *
 * @property {String} label Label to display along the component
 * @property {any} field The value with which the element is linked
 * @property {Boolean} checked Whether the checkbox is checked
 * @property {Boolean} disabled Put component in disabled mode
 */
export default class Toggle extends Component {
    constructor($element, $) {
        super($element, $);

        let element = this.element;
        element.tabIndex = 0;
        element.addEventListener('click', e => this.onClick(e));
        element.addEventListener('keydown', e => this.onKeydown(e));
        element.classList.add('vn-toggle');
    }

    set disabled(value) {
        this.element.tabIndex = !value ? 0 : -1;
        this.element.classList.toggle('disabled', Boolean(value));
        this._disabled = value;
    }

    get disabled() {
        return this._disabled;
    }

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

    onClick(event) {
        if (this.disabled || event.defaultPrevented)
            return true;

        event.preventDefault();
    }

    changed() {
        this.$.$applyAsync();
        this.element.dispatchEvent(new Event('change'));
        this.emit('change', {value: this.field});
    }
}
Toggle.$inject = ['$element', '$scope'];

ngModule.component('vnToggle', {
    controller: Toggle,
    bindings: {
        label: '@?',
        field: '=?',
        disabled: '<?',
        checked: '<?'
    }
});