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

export default class inputRange extends Input {
    constructor($element, $scope) {
        super($element, $scope);
        this.mdlElement = this.element.querySelector('.mdl-slider');
        componentHandler.upgradeElement(this.mdlElement);
        this.mdlElement.addEventListener('change', () => {
            this._value = this.input.value;
            this.$.$applyAsync();
            if (this._value && this.onChange)
                this.emit('change', {value: this._value});
        });
    }

    get value() {
        return this._value;
    }

    set value(value) {
        this._value = value;
        this.mdlElement.MaterialSlider.change(value);
    }

    get max() {
        return this.input.max;
    }

    set max(value) {
        this.input.max = value;
    }

    get min() {
        return this.input.min;
    }

    set min(value) {
        this.input.min = value;
    }

    get step() {
        return this.input.step;
    }

    set step(value) {
        this.input.step = value;
    }

    get() {
        return this._model;
    }

    set model(value) {
        this._model = value;
    }

    set disabled(value) {
        this.input.disabled = value;
    }
}

inputRange.$inject = ['$element', '$scope'];

ngModule.component('vnInputRange', {
    template: require('./index.html'),
    controller: inputRange,
    bindings: {
        label: '@?',
        disabled: '<?',
        min: '<?',
        max: '<?',
        step: '<?',
        value: '=',
        model: '=',
        onChange: '&'
    }
});