import { focus } from '@dojo/framework/core/middleware/focus';
import { create, tsx } from '@dojo/framework/core/vdom';
import { formatAriaProperties, isRenderResult } from '../common/util';
import theme from '../middleware/theme';
import * as css from '../theme/default/radio.m.css';
import Label from '../label';
const factory = create({ focus, theme })
    .properties()
    .children();
export const Radio = factory(function Radio({ properties, id, children, middleware: { focus, theme } }) {
    const { aria = {}, checked = false, classes, disabled, labelHidden, name, onBlur, onFocus, onOut, onOver, onValue, readOnly, required, theme: themeProp, valid, value, variant, widgetId } = properties();
    const themeCss = theme.classes(css);
    const idBase = widgetId || `radio-${id}`;
    const [labelChildren] = children();
    const label = isRenderResult(labelChildren) ? labelChildren : labelChildren.label;
    return (tsx("div", { key: "root", classes: [
            theme.variant(),
            themeCss.root,
            checked ? themeCss.checked : null,
            disabled ? themeCss.disabled : null,
            focus.isFocused('root') ? themeCss.focused : null,
            valid === false ? themeCss.invalid : null,
            valid === true ? themeCss.valid : null,
            readOnly ? themeCss.readonly : null,
            required ? themeCss.required : null
        ] },
        tsx("div", { classes: themeCss.inputWrapper },
            tsx("input", Object.assign({ id: idBase }, formatAriaProperties(aria), { classes: themeCss.input, checked: checked, disabled: disabled, focus: focus.shouldFocus(), "aria-invalid": valid === false ? 'true' : undefined, name: name, readonly: readOnly, "aria-readonly": readOnly === true ? 'true' : undefined, required: required, type: "radio", value: value, onblur: () => onBlur && onBlur(), onchange: (event) => {
                    event.stopPropagation();
                    const radio = event.target;
                    onValue(radio.checked);
                }, onfocus: () => onFocus && onFocus(), onpointerenter: () => onOver && onOver(), onpointerleave: () => onOut && onOut() })),
            tsx("div", { classes: themeCss.radioBackground },
                tsx("div", { classes: themeCss.radioOuter }),
                tsx("div", { classes: themeCss.radioInner }))),
        children().length > 0 && (tsx(Label, { key: "label", classes: classes, theme: themeProp, disabled: disabled, focused: focus.isFocused('root'), forId: idBase, valid: valid, readOnly: readOnly, hidden: labelHidden, required: required, secondary: true, variant: variant }, label))));
});
export default Radio;

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