import focus from '@dojo/framework/core/middleware/focus';
import theme from '../middleware/theme';
import { create, tsx } from '@dojo/framework/core/vdom';
import { formatAriaProperties } from '../common/util';
import Label from '../label';
import * as css from '../theme/default/switch.m.css';
const factory = create({ theme, focus })
    .properties()
    .children();
export default factory(function Switch({ children, properties, id, middleware: { theme, focus } }) {
    const { aria = {}, classes, disabled, labelHidden, name, onBlur, onFocus, onValue, onOut, onOver, readOnly, required, theme: themeProp, valid, variant, value = false } = properties();
    const [{ label, offLabel, onLabel } = {}] = children();
    const themedCss = theme.classes(css);
    const idBase = `switch-${id}`;
    return (tsx("div", { key: "root", classes: [
            theme.variant(),
            themedCss.root,
            value ? themedCss.checked : null,
            disabled ? themedCss.disabled : null,
            focus.isFocused('root') ? themedCss.focused : null,
            valid === false ? themedCss.invalid : null,
            valid === true ? themedCss.valid : null,
            readOnly ? themedCss.readonly : null,
            required ? themedCss.required : null
        ] },
        offLabel && (tsx("div", { key: "offlabel", classes: themedCss.offLabel, "aria-hidden": value ? 'true' : undefined }, offLabel)),
        tsx("div", { classes: themedCss.inputWrapper },
            tsx("div", { classes: themedCss.track }),
            tsx("div", { classes: themedCss.underlay },
                tsx("div", { classes: themedCss.thumb },
                    tsx("input", Object.assign({ id: idBase }, formatAriaProperties(aria), { classes: themedCss.nativeControl, checked: value, 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}`, role: "switch", "aria-checked": value ? 'true' : 'false', onblur: () => onBlur && onBlur(), onchange: (event) => {
                            event.stopPropagation();
                            const checkbox = event.target;
                            onValue(checkbox.checked);
                        }, onfocus: () => onFocus && onFocus(), onpointerenter: () => onOver && onOver(), onpointerleave: () => onOut && onOut() }))))),
        onLabel && (tsx("div", { key: "onLabel", classes: themedCss.onLabel, "aria-hidden": value ? undefined : 'true' }, onLabel)),
        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: idBase, secondary: true }, label))));
});

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