"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var tslib_1 = require("tslib");
var focus_1 = require("@dojo/framework/core/middleware/focus");
var theme_1 = require("../middleware/theme");
var vdom_1 = require("@dojo/framework/core/vdom");
var util_1 = require("../common/util");
var label_1 = require("../label");
var css = require("../theme/default/switch.m.css");
var factory = vdom_1.create({ theme: theme_1.default, focus: focus_1.default })
    .properties()
    .children();
exports.default = factory(function Switch(_a) {
    var children = _a.children, properties = _a.properties, id = _a.id, _b = _a.middleware, theme = _b.theme, focus = _b.focus;
    var _c = properties(), _d = _c.aria, aria = _d === void 0 ? {} : _d, classes = _c.classes, disabled = _c.disabled, labelHidden = _c.labelHidden, name = _c.name, onBlur = _c.onBlur, onFocus = _c.onFocus, onValue = _c.onValue, onOut = _c.onOut, onOver = _c.onOver, readOnly = _c.readOnly, required = _c.required, themeProp = _c.theme, valid = _c.valid, variant = _c.variant, _e = _c.value, value = _e === void 0 ? false : _e;
    var _f = tslib_1.__read(children(), 1), _g = _f[0], _h = _g === void 0 ? {} : _g, label = _h.label, offLabel = _h.offLabel, onLabel = _h.onLabel;
    var themedCss = theme.classes(css);
    var idBase = "switch-" + id;
    return (vdom_1.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 && (vdom_1.tsx("div", { key: "offlabel", classes: themedCss.offLabel, "aria-hidden": value ? 'true' : undefined }, offLabel)),
        vdom_1.tsx("div", { classes: themedCss.inputWrapper },
            vdom_1.tsx("div", { classes: themedCss.track }),
            vdom_1.tsx("div", { classes: themedCss.underlay },
                vdom_1.tsx("div", { classes: themedCss.thumb },
                    vdom_1.tsx("input", tslib_1.__assign({ id: idBase }, util_1.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: function () { return onBlur && onBlur(); }, onchange: function (event) {
                            event.stopPropagation();
                            var checkbox = event.target;
                            onValue(checkbox.checked);
                        }, onfocus: function () { return onFocus && onFocus(); }, onpointerenter: function () { return onOver && onOver(); }, onpointerleave: function () { return onOut && onOut(); } }))))),
        onLabel && (vdom_1.tsx("div", { key: "onLabel", classes: themedCss.onLabel, "aria-hidden": value ? undefined : 'true' }, onLabel)),
        label && (vdom_1.tsx(label_1.default, { 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.js.map*/