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, $);

        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._disabled = value;
        this.classList.toggle('disabled', Boolean(value));
        this.refreshTabIndex();
    }

    get disabled() {
        return this._disabled;
    }

    set readonly(value) {
        this._readonly = value;
        this.classList.toggle('readonly', Boolean(value));
    }

    get readonly() {
        return this._readonly;
    }

    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});
    }
}

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