"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var tslib_1 = require("tslib");
var focus_1 = require("@dojo/framework/core/middleware/focus");
var icache_1 = require("@dojo/framework/core/middleware/icache");
var theme_1 = require("../middleware/theme");
var validity_1 = require("@dojo/framework/core/middleware/validity");
var vdom_1 = require("@dojo/framework/core/vdom");
var util_1 = require("../common/util");
var index_1 = require("../helper-text/index");
var index_2 = require("../label/index");
var css = require("../theme/default/text-input.m.css");
function formatAutocomplete(autocomplete) {
    if (typeof autocomplete === 'boolean') {
        return autocomplete ? 'on' : 'off';
    }
    return autocomplete;
}
var factory = vdom_1.create({
    theme: theme_1.default,
    icache: icache_1.createICacheMiddleware(),
    validity: validity_1.default,
    focus: focus_1.default,
    diffProperty: vdom_1.diffProperty,
    invalidator: vdom_1.invalidator
})
    .properties()
    .children();
exports.TextInput = factory(function TextInput(_a) {
    var _b = _a.middleware, icache = _b.icache, theme = _b.theme, validity = _b.validity, focus = _b.focus, diffProperty = _b.diffProperty, invalidator = _b.invalidator, properties = _a.properties, children = _a.children, id = _a.id;
    diffProperty('pattern', function (previous, next) {
        var value = next.pattern instanceof RegExp ? next.pattern.source : next.pattern;
        if (value !== previous.pattern) {
            invalidator();
        }
    });
    var themeCss = theme.classes(css);
    var dirty = icache.getOrSet('dirty', false);
    var _c = properties(), _d = _c.aria, aria = _d === void 0 ? {} : _d, autocomplete = _c.autocomplete, classes = _c.classes, customValidator = _c.customValidator, disabled = _c.disabled, helperText = _c.helperText, _e = _c.labelHidden, labelHidden = _e === void 0 ? false : _e, max = _c.max, maxLength = _c.maxLength, min = _c.min, minLength = _c.minLength, name = _c.name, onBlur = _c.onBlur, onClick = _c.onClick, onFocus = _c.onFocus, onKeyDown = _c.onKeyDown, onKeyUp = _c.onKeyUp, onOut = _c.onOut, onOver = _c.onOver, onValidate = _c.onValidate, onValue = _c.onValue, patternValue = _c.pattern, placeholder = _c.placeholder, readOnly = _c.readOnly, required = _c.required, step = _c.step, themeProp = _c.theme, _f = _c.type, type = _f === void 0 ? 'text' : _f, initialValue = _c.initialValue, _g = _c.valid, validValue = _g === void 0 ? { valid: undefined, message: '' } : _g, _h = _c.widgetId, widgetId = _h === void 0 ? "text-input-" + id : _h, variant = _c.variant;
    var value = properties().value;
    var _j = tslib_1.__read(children(), 1), _k = _j[0], _l = _k === void 0 ? {} : _k, label = _l.label, leading = _l.leading, trailing = _l.trailing;
    if (value === undefined) {
        value = icache.get('value');
        var existingInitialValue = icache.get('initialValue');
        if (initialValue !== existingInitialValue) {
            icache.set('value', initialValue);
            icache.set('initialValue', initialValue);
            value = initialValue;
        }
    }
    var pattern = patternValue instanceof RegExp ? patternValue.source : patternValue;
    function _callOnValidate(valid, message) {
        var previousValid = properties().valid;
        var previousMessage;
        if (typeof previousValid === 'object') {
            previousMessage = previousValid.message;
            previousValid = previousValid.valid;
        }
        if (valid !== previousValid || message !== previousMessage) {
            onValidate && onValidate(valid, message);
        }
    }
    if (onValidate) {
        if (value === '' && !dirty) {
            _callOnValidate(undefined, '');
        }
        else {
            icache.set('dirty', true);
            var _m = validity.get('input', value || ''), valid_1 = _m.valid, _o = _m.message, message_1 = _o === void 0 ? '' : _o;
            if (valid_1 && customValidator) {
                var customValid = customValidator(value || '');
                if (customValid) {
                    valid_1 = customValid.valid;
                    message_1 = customValid.message || '';
                }
            }
            _callOnValidate(valid_1, message_1);
        }
    }
    var _p = typeof validValue === 'boolean' ? { valid: validValue, message: '' } : validValue, valid = _p.valid, message = _p.message;
    var computedHelperText = (valid === false && message) || helperText;
    var inputFocused = focus.isFocused('input');
    return (vdom_1.tsx("div", { key: "root", classes: [theme.variant(), themeCss.root], role: "presentation" },
        vdom_1.tsx("div", { key: "wrapper", classes: [
                themeCss.wrapper,
                disabled ? themeCss.disabled : null,
                inputFocused ? themeCss.focused : null,
                valid === false ? themeCss.invalid : null,
                valid === true ? themeCss.valid : null,
                readOnly ? themeCss.readonly : null,
                required ? themeCss.required : null,
                leading ? themeCss.hasLeading : null,
                trailing ? themeCss.hasTrailing : null,
                !label || labelHidden ? themeCss.noLabel : null
            ], role: "presentation" },
            label && (vdom_1.tsx(index_2.default, { theme: themeProp, classes: classes, variant: variant, disabled: disabled, valid: valid, focused: inputFocused, readOnly: readOnly, required: required, hidden: labelHidden, forId: widgetId, active: !!value || inputFocused }, label)),
            vdom_1.tsx("div", { key: "inputWrapper", classes: [
                    themeCss.inputWrapper,
                    inputFocused ? themeCss.inputWrapperFocused : undefined
                ], role: "presentation" },
                leading,
                vdom_1.tsx("input", tslib_1.__assign({}, util_1.formatAriaProperties(aria), { "aria-invalid": valid === false ? 'true' : undefined, autocomplete: formatAutocomplete(autocomplete), classes: themeCss.input, disabled: disabled, id: widgetId, focus: focus.shouldFocus, key: 'input', max: max, maxlength: maxLength ? "" + maxLength : null, min: min, minlength: minLength ? "" + minLength : null, name: name, pattern: pattern, placeholder: placeholder, readOnly: readOnly, "aria-readonly": readOnly ? 'true' : undefined, required: required, step: step, type: type, value: value, onblur: function () {
                        onBlur && onBlur();
                    }, onfocus: function () {
                        onFocus && onFocus();
                    }, oninput: function (event) {
                        event.stopPropagation();
                        var value = event.target.value;
                        icache.set('value', value);
                        onValue && onValue(value);
                    }, onkeydown: function (event) {
                        event.stopPropagation();
                        onKeyDown && onKeyDown(event.which, function () { return event.preventDefault(); });
                    }, onkeyup: function (event) {
                        event.stopPropagation();
                        onKeyUp && onKeyUp(event.which, function () { return event.preventDefault(); });
                    }, onclick: function () {
                        onClick && onClick();
                    }, onpointerenter: function () {
                        onOver && onOver();
                    }, onpointerleave: function () {
                        onOut && onOut();
                    } })),
                trailing)),
        vdom_1.tsx(index_1.default, { text: computedHelperText, valid: valid, classes: classes, theme: themeProp, variant: variant })));
});
var addonFactory = vdom_1.create({
    theme: theme_1.default
}).properties();
exports.Addon = addonFactory(function Addon(_a) {
    var theme = _a.middleware.theme, properties = _a.properties, children = _a.children;
    var themeCss = theme.classes(css);
    var filled = properties().filled;
    return (vdom_1.tsx("span", { classes: [themeCss.addonRoot, filled ? themeCss.addonFilled : null] }, children()));
});
exports.default = exports.TextInput;

/*# sourceMappingURL=index.js.map*/