import focus from '@dojo/framework/core/middleware/focus';
import { i18n } from '@dojo/framework/core/middleware/i18n';
import { createICacheMiddleware } from '@dojo/framework/core/middleware/icache';
import { create, tsx } from '@dojo/framework/core/vdom';
import HelperText from '../helper-text';
import theme from '../middleware/theme';
import { isRenderResult } from '../common/util';
import * as css from '../theme/default/native-select.m.css';
import * as labelCss from '../theme/default/label.m.css';
import * as iconCss from '../theme/default/icon.m.css';
import Icon from '../icon';
import Label from '../label';
const icache = createICacheMiddleware();
const factory = create({ icache, focus, theme, i18n })
    .properties()
    .children();
export const NativeSelect = factory(function NativeSelect({ properties, children, id, middleware: { icache, theme, focus } }) {
    const { classes, variant, disabled, helperText, initialValue, onValue, options, required, name, size, onFocus, onBlur, theme: themeProp } = properties();
    const [labelChild] = children();
    const label = isRenderResult(labelChild) ? labelChild : labelChild.label;
    let { value } = properties();
    if (value === undefined) {
        value = icache.get('value');
        const 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;
            }
        }
    }
    const selectedValue = value;
    const themedCss = theme.classes(css);
    const inputFocused = focus.isFocused('native-select');
    return (tsx("div", { classes: [
            theme.variant(),
            themedCss.root,
            disabled && themedCss.disabled,
            required && themedCss.required,
            inputFocused ? themedCss.focused : undefined
        ], key: "root" },
        label && (tsx(Label, { theme: theme.compose(labelCss, css, 'label'), variant: variant, focused: inputFocused, classes: classes, disabled: disabled, forId: id, required: required, active: !!selectedValue }, label)),
        tsx("div", { classes: themedCss.inputWrapper },
            tsx("select", { key: "native-select", onchange: (event) => {
                    const { value } = event.target;
                    if (value !== icache.get('value')) {
                        icache.set('value', value);
                        onValue && onValue(value);
                    }
                }, disabled: disabled, name: name, required: required, id: id, size: size, onfocus: () => {
                    onFocus && onFocus();
                }, onblur: () => {
                    onBlur && onBlur();
                }, classes: themedCss.select },
                icache.get('prependBlank') && tsx("option", { key: "blank-option", value: "" }),
                options.map(({ value, label, disabled = false }, index) => {
                    return (tsx("option", { key: `option-${index}`, value: value, disabled: disabled, selected: selectedValue === value }, label ? label : value));
                })),
            tsx("span", { classes: themedCss.arrow },
                tsx(Icon, { type: "downIcon", theme: theme.compose(iconCss, css, 'icon'), variant: variant, classes: classes }))),
        tsx(HelperText, { key: "helperText", text: helperText, variant: variant, classes: classes, theme: themeProp })));
});
export default NativeSelect;

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