import focus from '@dojo/framework/core/middleware/focus';
import theme from '../middleware/theme';
import { uuid } from '@dojo/framework/core/util';
import { tsx, create } from '@dojo/framework/core/vdom';
import { formatAriaProperties } from '../common/util';
import Label from '../label/index';
import * as css from '../theme/default/checkbox.m.css';
const factory = create({ theme, focus })
    .properties()
    .children();
export const Checkbox = factory(function Checkbox({ children, properties, middleware: { theme, focus } }) {
    const _uuid = uuid();
    const { aria = {}, checked = false, classes, disabled, labelHidden, name, onBlur, onFocus, onValue, onOut, onOver, readOnly, required, theme: themeProp, variant, valid, value, widgetId = _uuid } = properties();
    const [label] = children();
    const themeCss = theme.classes(css);
    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: widgetId }, 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: "checkbox", value: value, onblur: () => onBlur && onBlur(), onchange: (event) => {
                    event.stopPropagation();
                    const checkbox = event.target;
                    onValue(checkbox.checked);
                }, onfocus: () => onFocus && onFocus(), onpointerenter: () => onOver && onOver(), onpointerleave: () => onOut && onOut() })),
            tsx("div", { classes: themeCss.background })),
        label && (tsx(Label, { key: "label", classes: classes, theme: themeProp, variant: variant, disabled: disabled, focused: focus.isFocused('root'), valid: valid, readOnly: readOnly, required: required, hidden: labelHidden, forId: widgetId, secondary: true }, label))));
});
export default Checkbox;

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