import React__default from 'react';
import '@emotion/core';
import { _ as __rest, a as __assign, b as __makeTemplateObject } from './_tslib-5c49bd3f.js';
import { jsxs, jsx } from '@emotion/react/jsx-runtime';
import '@emotion/styled';
import '@emotion/react';
import { s as styled } from './css-efbd0d2d.js';
import { u as useId } from './auto-id.esm-bfe8e225.js';
import { u as useCustomCss, a as usePrevious } from './utilities-357c56e6.js';

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 = __rest(_a, ["onChange", "label", "ariaLabel", "labelLeft", "customCss", "id", "isOn", "wrapperProps"]);
    var id = useId(userProvidedId);
    var _e = React__default.useState(isOn), switchIsOn = _e[0], setIsOn = _e[1];
    var resolvedCss = useCustomCss(customCss);
    var prevIsOn = usePrevious(isOn);
    React__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 (jsxs(StyledWrapper, __assign({}, wrapperProps, { children: [labelLeft && (jsx(StyledLabelDiv, __assign({ htmlFor: id, textAlign: "right" }, { children: labelLeft }), void 0)),
            jsx(StyledSwitchButton, __assign({ role: "switch", "aria-checked": isOn, id: id, onClick: handleClick, "aria-label": getAriaLabel(), css: resolvedCss }, props, { children: jsx(StyledFobDiv, { isOn: switchIsOn }, void 0) }), void 0),
            label && (jsx(StyledLabelDiv, __assign({ htmlFor: id, textAlign: "left" }, { children: label }), void 0))] }), void 0));
};
var StyledSwitchButton = styled('button')(templateObject_1 || (templateObject_1 = __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 = styled('label')(templateObject_2 || (templateObject_2 = __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 = styled('div')(templateObject_3 || (templateObject_3 = __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 = styled('div')(templateObject_4 || (templateObject_4 = __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;

export { Switch };
//# sourceMappingURL=Switch.js.map
