"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var tslib_1 = require("tslib");
var focus_1 = require("@dojo/framework/core/middleware/focus");
var i18n_1 = require("@dojo/framework/core/middleware/i18n");
var icache_1 = require("@dojo/framework/core/middleware/icache");
var vdom_1 = require("@dojo/framework/core/vdom");
var helper_text_1 = require("../helper-text");
var theme_1 = require("../middleware/theme");
var util_1 = require("../common/util");
var css = require("../theme/default/native-select.m.css");
var labelCss = require("../theme/default/label.m.css");
var iconCss = require("../theme/default/icon.m.css");
var icon_1 = require("../icon");
var label_1 = require("../label");
var icache = icache_1.createICacheMiddleware();
var factory = vdom_1.create({ icache: icache, focus: focus_1.default, theme: theme_1.default, i18n: i18n_1.i18n })
    .properties()
    .children();
exports.NativeSelect = factory(function NativeSelect(_a) {
    var properties = _a.properties, children = _a.children, id = _a.id, _b = _a.middleware, icache = _b.icache, theme = _b.theme, focus = _b.focus;
    var _c = properties(), classes = _c.classes, variant = _c.variant, disabled = _c.disabled, helperText = _c.helperText, initialValue = _c.initialValue, onValue = _c.onValue, options = _c.options, required = _c.required, name = _c.name, size = _c.size, onFocus = _c.onFocus, onBlur = _c.onBlur, themeProp = _c.theme;
    var _d = tslib_1.__read(children(), 1), labelChild = _d[0];
    var label = util_1.isRenderResult(labelChild) ? labelChild : labelChild.label;
    var value = properties().value;
    if (value === undefined) {
        value = icache.get('value');
        var existingInitialValue = icache.get('initial');
        icache.set('prependBlank', true);
        if (initialValue !== undefined) {
            icache.set('prependBlank', false);
            if (initialValue !== existingInitialValue) {
                icache.set('initial', initialValue);
                icache.set('value', initialValue);
                value = initialValue;
            }
        }
    }
    var selectedValue = value;
    var themedCss = theme.classes(css);
    var inputFocused = focus.isFocused('native-select');
    return (vdom_1.tsx("div", { classes: [
            theme.variant(),
            themedCss.root,
            disabled && themedCss.disabled,
            required && themedCss.required,
            inputFocused ? themedCss.focused : undefined
        ], key: "root" },
        label && (vdom_1.tsx(label_1.default, { theme: theme.compose(labelCss, css, 'label'), variant: variant, focused: inputFocused, classes: classes, disabled: disabled, forId: id, required: required, active: !!selectedValue }, label)),
        vdom_1.tsx("div", { classes: themedCss.inputWrapper },
            vdom_1.tsx("select", { key: "native-select", onchange: function (event) {
                    var value = event.target.value;
                    if (value !== icache.get('value')) {
                        icache.set('value', value);
                        onValue && onValue(value);
                    }
                }, disabled: disabled, name: name, required: required, id: id, size: size, onfocus: function () {
                    onFocus && onFocus();
                }, onblur: function () {
                    onBlur && onBlur();
                }, classes: themedCss.select },
                icache.get('prependBlank') && vdom_1.tsx("option", { key: "blank-option", value: "" }),
                options.map(function (_a, index) {
                    var value = _a.value, label = _a.label, _b = _a.disabled, disabled = _b === void 0 ? false : _b;
                    return (vdom_1.tsx("option", { key: "option-" + index, value: value, disabled: disabled, selected: selectedValue === value }, label ? label : value));
                })),
            vdom_1.tsx("span", { classes: themedCss.arrow },
                vdom_1.tsx(icon_1.default, { type: "downIcon", theme: theme.compose(iconCss, css, 'icon'), variant: variant, classes: classes }))),
        vdom_1.tsx(helper_text_1.default, { key: "helperText", text: helperText, variant: variant, classes: classes, theme: themeProp })));
});
exports.default = exports.NativeSelect;

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