'use strict';

var React = require('react');
var classnames = require('classnames');
var Icon = require('./Icon-cjs.js');

var styles = {"switch":"rVg6dYYBFN4-","track":"yyISARGmmJo-","isChecked":"_40c6OIH33p8-","toggle":"zA0Fmn8IIZI-","disabled":"e-cSZjkHGw8-","pip":"PiwOCJz7Zto-","icon":"JS-CLzHa9-I-","spinning":"_0lBGF-nXMrc-"};

function Switch({ value: providedValue, ariaLabel, name, disabled, onChange, }) {
    const [statefulValue, setValue] = React.useState(false);
    const value = providedValue != undefined ? providedValue : statefulValue;
    const toggleSwitch = () => {
        if (disabled) {
            return;
        }
        const newValue = !value;
        onChange && onChange(newValue);
        if (providedValue == undefined) {
            setValue(newValue);
        }
    };
    const className = classnames(styles.track, styles.switch, {
        [styles.isChecked]: value,
        [styles.disabled]: disabled,
    });
    return (React.createElement(React.Fragment, null,
        React.createElement("button", { id: name, type: "button", role: "switch", "aria-checked": value, "aria-label": ariaLabel, className: className, onClick: toggleSwitch, disabled: disabled },
            React.createElement("span", { className: styles.icon, "aria-hidden": "true" },
                React.createElement(Icon.Icon, Object.assign({ size: "small", name: value ? "checkmark" : "cross" }, getIconColor(value, disabled !== null && disabled !== void 0 ? disabled : false)))),
            React.createElement("span", { className: styles.toggle })),
        React.createElement("input", { name: name, type: "hidden", value: String(value) })));
}
function getIconColor(isChecked, isDisabled) {
    const checkedColor = {
        color: "surface",
    };
    const uncheckedColor = {
        customColor: isDisabled
            ? "var(--color-disabled)"
            : "var(--color-inactive--onSurface)",
    };
    return isChecked ? checkedColor : uncheckedColor;
}

exports.Switch = Switch;
