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

export default class Textfield extends Input {
    constructor($element, $scope, $attrs, vnTemplate) {
        super($element, $scope);
        vnTemplate.normalizeInputAttrs($attrs);
        this._value = null;
        this.type = $attrs.type;
        this.showActions = false;
        this.hasInfo = Boolean($attrs.info);
        this.hasFocus = false;
        this.hasMouseIn = false;

        this.input.addEventListener('keyup', e => {
            if (e.defaultPrevented || e.key != 'Escape')
                return;

            this.value = this.oldValue;
            this.cancelled = true;
            e.preventDefault();
        });
        this.input.addEventListener('change', e => {
            if (this.onChange && !this.cancelled && (this.oldValue != this.value)) {
                this.onChange();
                this.saveOldValue();
            } else
                this.cancelled = false;
        });
    }

    $postLink() {
        this.saveOldValue();
    }

    saveOldValue() {
        this.oldValue = this.value;
    }

    set value(value) {
        this._value = (value === undefined || value === '') ? null : value;
        this.input.value = this._value;
        this.hasValue = this._value != null;
        this.element.classList.toggle('not-empty', this.hasValue);
    }

    get value() {
        return this._value;
    }

    set type(value) {
        this._type = value || 'text';
    }

    get type() {
        return this._type;
    }

    set vnTabIndex(value) {
        this.input.tabindex = value;
    }

    clear() {
        this.saveOldValue();
        this.value = null;
        if (this.onClear) this.onClear();
        this.input.focus();
    }
}
Textfield.$inject = ['$element', '$scope', '$attrs', 'vnTemplate'];

ngModule.component('vnTextfield', {
    template: require('./textfield.html'),
    transclude: {
        leftIcons: '?tLeftIcons',
        rightIcons: '?tRightIcons'
    },
    controller: Textfield,
    bindings: {
        value: '=model',
        label: '@?',
        name: '@?',
        disabled: '<?',
        required: '@?',
        readonly: '<?',
        rule: '@?',
        type: '@?',
        vnTabIndex: '@?',
        onChange: '&',
        onClear: '&',
        info: '@?'
    }
});