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

export default class InputTime extends Input {
    constructor($element, $scope, $filter) {
        super($element, $scope);
        this.$filter = $filter;

        this.registerEvents();
    }

    registerEvents() {
        this.input.addEventListener('change', event => {
            this.onTimeChange();
            this.emit('change', {event});
        });

        this.input.addEventListener('focus', event => {
            this.emit('focus', {event});
        });
    }

    /**
     * Gets current value
     */
    get value() {
        return this._value;
    }

    /**
     * Sets input value
     *
     * @param {Number} value - Value
     */
    set value(value) {
        this.updateValue(value);
        this.input.value = this.$filter('date')(value, 'HH:mm');
    }

    updateValue(value) {
        this._value = value;
        this.element.classList.toggle('not-empty', value != null);
        this.validateValue();
    }

    onTimeChange() {
        let date = null;
        let value = this.input.value;

        if (value) {
            let split = value.split(':').map(i => parseInt(i) || null);
            date = new Date(this.value || null);
            date.setHours(split[0], split[1], 0, 0);
        }

        this.updateValue(date);
    }
}

InputTime.$inject = ['$element', '$scope', '$filter'];

ngModule.component('vnInputTime', {
    template: require('./index.html'),
    controller: InputTime,
    transclude: {
        leftIcons: '?tLeftIcons',
        rightIcons: '?tRightIcons'
    },
    bindings: {
        label: '@?',
        disabled: '<?',
        readonly: '<?',
        rule: '@?',
        value: '=model',
        vnTabIndex: '@?',
        onChange: '&',
        onClear: '&'
    }
});