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

export default class Range extends FormInput {
    constructor($element, $scope) {
        super($element, $scope);
        this.input = this.element.querySelector('input');
        this.input.addEventListener('change', () => this.onValueUpdate());
    }

    get field() {
        return super.field;
    }

    set field(value) {
        this.input.value = value;
        super.field = 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;
    }

    refreshTabIndex() {
        this.input.tabIndex = this.disabled ? -1 : this.tabIndex;
    }

    onValueUpdate() {
        this.change(this.input.value);
        this.$.$applyAsync();
    }
}

ngModule.vnComponent('vnRange', {
    template: require('./index.html'),
    controller: Range,
    bindings: {
        min: '<?',
        max: '<?',
        step: '<?',
        minLabel: '@?',
        maxLabel: '@?'
    }
});