import ngModule from '../../module';
import Input from '../../lib/input';
import './style.scss';

export default class Controller extends Input {
    constructor($element, $scope, $attrs) {
        super($element, $scope);
        componentHandler.upgradeElement(this.element.firstChild);
        this.mdlElement = this.element.firstChild.MaterialCheckbox;
        this.input.addEventListener('change', () => this.onChange());
        this.hasInfo = Boolean($attrs.info);
        this.info = $attrs.info || null;
    }
    set field(value) {
        this._field = value;
        this.input.checked = value == true;
        this.mdlUpdate();
    }
    get field() {
        return this._field;
    }
    $onInit() {
        if (this.model) {
            this.model.$render = () => {
                this.input.checked = this.model.$viewValue || false;
                this.mdlUpdate();
            };
            this.$element.on('blur keyup change', () => {
                this.$.$evalAsync(() => {
                    this.model.$setViewValue(this.input.checked);
                });
            });
        }
    }
    onChange() {
        this._field = this.input.checked == true;
        this.$.$applyAsync();
        this.emit('change');
    }
}
Controller.$inject = ['$element', '$scope', '$attrs'];

ngModule.component('vnCheck', {
    template: require('./check.html'),
    controller: Controller,
    require: {
        model: '?ngModel'
    },
    bindings: {
        field: '=?',
        onChange: '&?',
        label: '@?',
        disabled: '<?',
        rule: '@?'
    }
});