'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var React = require('react');
require('@emotion/core');
var _tslib = require('./_tslib-9c546438.js');
var jsxRuntime = require('@emotion/react/jsx-runtime');
require('@emotion/styled');
require('@emotion/react');
var css = require('./css-203af057.js');
var autoId_esm = require('./auto-id.esm-3b4575a4.js');
var utilities = require('./utilities-d51a0c2d.js');

function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }

var React__default = /*#__PURE__*/_interopDefaultLegacy(React);

var Switch = function (_a) {
    var onChange = _a.onChange, label = _a.label, ariaLabel = _a.ariaLabel, labelLeft = _a.labelLeft, _b = _a.customCss, customCss = _b === void 0 ? '' : _b, userProvidedId = _a.id, _c = _a.isOn, isOn = _c === void 0 ? false : _c, _d = _a.wrapperProps, wrapperProps = _d === void 0 ? {} : _d, props = _tslib.__rest(_a, ["onChange", "label", "ariaLabel", "labelLeft", "customCss", "id", "isOn", "wrapperProps"]);
    var id = autoId_esm.useId(userProvidedId);
    var _e = React__default['default'].useState(isOn), switchIsOn = _e[0], setIsOn = _e[1];
    var resolvedCss = utilities.useCustomCss(customCss);
    var prevIsOn = utilities.usePrevious(isOn);
    React__default['default'].useEffect(function () {
        if (isOn !== prevIsOn && isOn !== switchIsOn) {
            setIsOn(isOn);
        }
    }, [isOn, switchIsOn, prevIsOn]);
    var getAriaLabel = function () {
        var assembledLabel = '';
        if (ariaLabel) {
            assembledLabel += ariaLabel + " ";
        }
        if (labelLeft && label) {
            assembledLabel += (isOn ? label : labelLeft) + " selected.";
        }
        else if (labelLeft && !label) {
            assembledLabel += "" + labelLeft;
        }
        else if (label && !labelLeft) {
            assembledLabel += "" + label;
        }
        return assembledLabel;
    };
    var handleClick = function (e) {
        if (onChange || isOn === undefined) {
            setIsOn(!switchIsOn);
            if (onChange) {
                onChange(!switchIsOn, e);
            }
        }
    };
    return (jsxRuntime.jsxs(StyledWrapper, _tslib.__assign({}, wrapperProps, { children: [labelLeft && (jsxRuntime.jsx(StyledLabelDiv, _tslib.__assign({ htmlFor: id, textAlign: "right" }, { children: labelLeft }), void 0)),
            jsxRuntime.jsx(StyledSwitchButton, _tslib.__assign({ role: "switch", "aria-checked": isOn, id: id, onClick: handleClick, "aria-label": getAriaLabel(), css: resolvedCss }, props, { children: jsxRuntime.jsx(StyledFobDiv, { isOn: switchIsOn }, void 0) }), void 0),
            label && (jsxRuntime.jsx(StyledLabelDiv, _tslib.__assign({ htmlFor: id, textAlign: "left" }, { children: label }), void 0))] }), void 0));
};
var StyledSwitchButton = css.styled('button')(templateObject_1 || (templateObject_1 = _tslib.__makeTemplateObject(["\n  background: ", ";\n  width: 42px;\n  height: 22px;\n  border-radius: 14px;\n  padding: 4px;\n  position: relative;\n  transition: background 150ms;\n  cursor: pointer;\n  border: none;\n  outline: none;\n  margin-right: 10px;\n  margin-left: 10px;\n  &[aria-checked='true'] {\n    background: ", ";\n  }\n  &:focus-visible {\n    box-shadow: 0 0 0 2.5px ", ";\n  }\n"], ["\n  background: ", ";\n  width: 42px;\n  height: 22px;\n  border-radius: 14px;\n  padding: 4px;\n  position: relative;\n  transition: background 150ms;\n  cursor: pointer;\n  border: none;\n  outline: none;\n  margin-right: 10px;\n  margin-left: 10px;\n  &[aria-checked='true'] {\n    background: ", ";\n  }\n  &:focus-visible {\n    box-shadow: 0 0 0 2.5px ", ";\n  }\n"])), function (_a) {
    var theme = _a.theme;
    return theme.colors.neutral;
}, function (_a) {
    var theme = _a.theme;
    return theme.colors.primary;
}, function (_a) {
    var theme = _a.theme;
    return theme.colors.inputFocus;
});
var StyledLabelDiv = css.styled('label')(templateObject_2 || (templateObject_2 = _tslib.__makeTemplateObject(["\n  font-size: 1em;\n  text-align: ", ";\n"], ["\n  font-size: 1em;\n  text-align: ", ";\n"])), function (_a) {
    var textAlign = _a.textAlign;
    return textAlign;
});
var StyledFobDiv = css.styled('div')(templateObject_3 || (templateObject_3 = _tslib.__makeTemplateObject(["\n  width: 16px;\n  height: 16px;\n  border-radius: 16px;\n  border: none;\n  transition: width 150ms, transform 150ms;\n  outline: none;\n  position: absolute;\n  top: 3px;\n  background: #fff;\n  cursor: pointer;\n  pointer-events: none;\n  left: 3px;\n  transform: translateX(", ");\n"], ["\n  width: 16px;\n  height: 16px;\n  border-radius: 16px;\n  border: none;\n  transition: width 150ms, transform 150ms;\n  outline: none;\n  position: absolute;\n  top: 3px;\n  background: #fff;\n  cursor: pointer;\n  pointer-events: none;\n  left: 3px;\n  transform: translateX(", ");\n"])), function (_a) {
    var isOn = _a.isOn;
    return (isOn ? '19px' : '0px');
});
var StyledWrapper = css.styled('div')(templateObject_4 || (templateObject_4 = _tslib.__makeTemplateObject(["\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n"], ["\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n"])));
var templateObject_1, templateObject_2, templateObject_3, templateObject_4;

exports.Switch = Switch;
//# sourceMappingURL=Switch.js.map
