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

/**
 * Basic element for user input. You can use this to supply a way for the user
 * to pick an option from multiple choices.
 *
 * @property {String} val The actual value of the option
 */
export default class Radio extends Toggle {
    set field(value) {
        super.field = value;
        this.element.classList.toggle('checked',
            Boolean(value) && value == this.val);
    }

    get field() {
        return super.field;
    }

    set checked(value) {
        this.field = value ? this.val : null;
    }

    get checked() {
        return this.field == this.val;
    }

    set val(value) {
        this._val = value;
        this.field = this.field;
    }

    get val() {
        return this._val;
    }

    onClick(event) {
        if (super.onClick(event)) return;
        this.change(this.val);
    }
}

ngModule.vnComponent('vnRadio', {
    template: require('../toggle/index.html'),
    controller: Radio,
    bindings: {
        val: '@?'
    }
});