import { module } from '../module';
import Component from '../lib/component';
// import * as resolveFactory from '../lib/resolveDefaultComponents';
// import * as normalizerFactory from '../lib/inputAttrsNormalizer';
import './style.scss';
// import './textfield.mdl';

export default class TextfieldController extends Component {
    constructor($element, $scope, $attrs) {
        super($element);

        this.$scope = $scope;
        this.$attrs = $attrs;
        this.$element = $element;

        this._value = null;

        this.type = this.$attrs.type || 'text';
        this.rule = this.$attrs.rule || null;
        
        componentHandler.upgradeElement($element[0].firstChild);
    }

    get value() {
        return this._value;
    }

    set value(value) {
        this._value = (value === undefined || value === '') ? null : value;
    }

    onClearClick() {
        this.input.value = null;
        this.checkValue();

        let event = this.document.createEvent('HTMLEvents');
        event.initEvent('change', false, true);
        this.input.dispatchEvent(event);
    }

    checkValue() {
        this.showClear(this.input.value);
    }

    showClear(show) {
        show = (show && document.activeElement === this.input);
        let clearButton = this.$element.querySelector('button');
        clearButton.style.visibility = show ? 'visible' : 'hidden';
    }

    select() {
        this.input.select();
    }

    focus() {
        this.input.focus();
    }
}
TextfieldController.$inject = ['$element', '$scope', '$attrs'];

module.component('vnTextfield', {
    template: require('./textfield.html'),
    controller: TextfieldController,
    bindings: {
        value: '=model',
        label: '@',
        name: '@',
        disable: '<'
    }
});