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

/**
 * Base component with common logic and styles for checkbox and radio button.
 *
 * @property {Boolean} checked Whether the checkbox is checked
 */
export default class Toggle extends FormInput {
    constructor($element, $) {
        super($element, $);
        this.initTabIndex();
        this.element.addEventListener('click', e => this.onClick(e));
        this.element.addEventListener('keydown', e => this.onKeydown(e));
    }

    onKeydown(event) {
        if (!event.defaultPrevented && event.key == ' ')
            this.element.click();
    }

    onClick(event) {
        if (!this.editable || event.defaultPrevented)
            return true;
    }

    change(value) {
        this.$.$applyAsync();
        super.change(value);
    }
}

ngModule.vnComponent('vnToggle', {
    controller: Toggle,
    bindings: {
        checked: '<?'
    }
});