"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 dimensions_1 = require("@dojo/framework/core/middleware/dimensions");
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,
    dimensions: dimensions_1.default
})
    .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, dimensions = _b.dimensions, 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, _e = _c.autocomplete, autocomplete = _e === void 0 ? false : _e, classes = _c.classes, customValidator = _c.customValidator, disabled = _c.disabled, helperText = _c.helperText, _f = _c.labelHidden, labelHidden = _f === void 0 ? false : _f, 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, _g = _c.type, type = _g === void 0 ? 'text' : _g, initialValue = _c.initialValue, _h = _c.valid, validValue = _h === void 0 ? { valid: undefined, message: '' } : _h, _j = _c.widgetId, widgetId = _j === void 0 ? "text-input-" + id : _j, variant = _c.variant, _k = _c.kind, kind = _k === void 0 ? 'kind' : _k;
    var value = properties().value;
    var _l = tslib_1.__read(children(), 1), _m = _l[0], _o = _m === void 0 ? {} : _m, label = _o.label, leading = _o.leading, trailing = _o.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 === undefined && !dirty) {
            callOnValidate(undefined, '');
        }
        else {
            icache.set('dirty', true);
            var _p = validity.get('input', value || ''), valid_1 = _p.valid, _q = _p.message, message_1 = _q === void 0 ? '' : _q;
            if (valid_1 && customValidator) {
                var customValid = customValidator(value || '');
                if (customValid) {
                    valid_1 = customValid.valid;
                    message_1 = customValid.message || '';
                }
            }
            callOnValidate(valid_1, message_1);
        }
    }
    var _r = typeof validValue === 'boolean' ? { valid: validValue, message: '' } : validValue, valid = _r.valid, message = _r.message;
    var computedHelperText = (valid === false && message) || helperText;
    var inputFocused = focus.isFocused('input');
    var autofilled = Boolean(icache.get('autofilled'));
    function renderLabel() {
        var labelActive = Boolean(!!value || inputFocused || autofilled);
        var renderedLabel = (vdom_1.tsx("span", { key: "label", classes: themeCss.labelWrapper },
            vdom_1.tsx(index_2.default, { theme: themeProp, classes: tslib_1.__assign({}, classes, { '@dojo/widgets/label': tslib_1.__assign({}, (classes ? classes['@dojo/widgets/label'] : {}), { root: [themeCss.label], active: kind === 'outlined' ? [themeCss.outlinedLabelActive] : [] }) }), variant: variant, disabled: disabled, valid: valid, focused: inputFocused, readOnly: readOnly, required: required, hidden: labelHidden, forId: widgetId, active: labelActive }, label)));
        return kind === 'outlined' ? (vdom_1.tsx("div", { classes: [themeCss.notchedOutline, labelActive && themeCss.notchedOutlineNotched] },
            vdom_1.tsx("div", { classes: themeCss.notchedOutlineLeading }),
            label && vdom_1.tsx("div", { classes: themeCss.notchedOutlineNotch }, renderedLabel),
            vdom_1.tsx("div", { classes: themeCss.notchedOutlineTrailing }))) : (label && renderedLabel);
    }
    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,
                kind === 'outlined' ? themeCss.outlinedKind : null,
                kind === 'kind' ? themeCss.defaultKind : null,
                kind === 'kind' && inputFocused ? themeCss.defaultKindFocused : null
            ], role: "presentation" },
            renderLabel(),
            kind === 'kind' && vdom_1.tsx("span", { classes: themeCss.ripple }),
            vdom_1.tsx("span", { key: "leading", classes: themeCss.leadingWrapper }, leading && vdom_1.tsx("span", { classes: themeCss.leading }, 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();
                }, onanimationstart: function (event) {
                    if (event.animationName === themeCss.onAutofillShown) {
                        icache.set('autofilled', true);
                    }
                } })),
            vdom_1.tsx("span", { key: "trailing", classes: themeCss.trailingWrapper }, trailing && vdom_1.tsx("span", { classes: themeCss.trailing }, trailing)),
            kind === 'kind' && (vdom_1.tsx("span", { classes: [
                    themeCss.lineRipple,
                    inputFocused ? themeCss.defaultKindLineRippleFocused : null
                ] }))),
        vdom_1.tsx(index_1.default, { text: computedHelperText, valid: valid, classes: classes, theme: themeProp, variant: variant })));
});
exports.default = exports.TextInput;

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