import Component from './component';

/**
 * Component that host an input.
 */
export default class Input extends Component {
    constructor($element, $scope) {
        super($element, $scope);
        this.input = this.element.querySelector('input');
    }

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

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

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

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

    mdlUpdate() {
        if (this.mdlElement)
            this.mdlElement.updateClasses_();
    }

    get validationError() {
        return this.input.validationMessage;
    }

    /**
     * Validates a valid input value
     *
     * @return {Boolean} - True if has a valid value
     */
    hasValidValue() {
        return this.input.checkValidity();
    }

    /**
     * Changes the input element
     * if has a validation error
     */
    validateValue() {
        if (!this.hasValidValue()) {
            this.hideError();
            this.showError();
        } else
            this.hideError();
    }

    /**
     * Shows the input validation error
     */
    showError() {
        const infixElement = this.element.querySelector('.infix');
        const infixClassList = infixElement.classList;

        const errorSpan = document.createElement('span');
        errorSpan.className = 'mdl-textfield__error';

        const errorText = document.createTextNode(this.validationError);

        errorSpan.append(errorText);
        infixElement.append(errorSpan);

        infixClassList.add('validated', 'invalid');
    }

    /**
     * Hides the input validation error
     */
    hideError() {
        const infixElement = this.element.querySelector('.infix');
        const infixClassList = infixElement.classList;
        const errorElement = this.element.querySelector('.infix span.mdl-textfield__error');

        if (errorElement)
            errorElement.remove();

        infixClassList.remove('validated', 'invalid');
    }
}
Input.$inject = ['$element', '$scope'];

export const component = {
    transclude: {
        leftIcons: '?tLeftIcons',
        rightIcons: '?tRightIcons'
    },
    bindings: {
        label: '@?',
        disabled: '<?',
        readonly: '<?',
        rule: '@?',
        value: '=model',
        vnTabIndex: '@?',
        onChange: '&',
        onClear: '&'
    }
};