"use strict";
var __rest = (this && this.__rest) || function (s, e) {
    var t = {};
    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
        t[p] = s[p];
    if (s != null && typeof Object.getOwnPropertySymbols === "function")
        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
                t[p[i]] = s[p[i]];
        }
    return t;
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.SwitchButton = exports.SwitchButtonBase = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = require("react");
const core_1 = require("../core");
const utils_1 = require("../utils");
const consts_1 = require("./consts");
const context_1 = require("./context");
const SwitchInput = core_1.styled.inputBox `
  cursor: inherit;
  height: calc(100% + 10px);
  left: -5px;
  margin: 0;
  opacity: 0;
  padding: 0;
  position: absolute;
  top: -5px;
  width: calc(100% + 10px);
  z-index: 1;
`;
const SwitchFoundation = core_1.styled.spanBox `
  border-radius: 100px;
  display: inline-flex;
  flex-shrink: 0;
  transition-duration: fast;
  position: relative;
`;
/** Circular element that moves along the track when toggled. */
const SwitchThumb = (0, core_1.styled)(SwitchFoundation) `
  position: absolute;
`;
/** Track element along which the thumb moves when toggled. */
const SwitchTrack = (0, core_1.styled)(SwitchFoundation) `
  align-items: center;
  flex: 1;
`;
exports.SwitchButtonBase = (0, core_1.styled)(SwitchFoundation) `
  color: white;
  cursor: pointer;
  --x-ring-color: green;

  &[aria-disabled='true'] {
    cursor: not-allowed;

    .vui-switchThumb {
      background-color: ${consts_1.switchColors.disabled};
    }

    .vui-switchTrack {
      --x-ring-color: ${consts_1.switchColors.disabled};
      background-color: ${consts_1.switchColors.disabledBg};
      color: ${consts_1.switchColors.disabled};
    }
  }
`;
/**
 * Controls the logic and visuals of multiple inner parts, such as input, track or thumb elements.
 * Handles controlled and uncontrolled modes.
 */
exports.SwitchButton = (0, core_1.vui)((props, ref) => {
    const mergedProps = Object.assign(Object.assign({}, (0, context_1.useSwitchContext)()), props);
    const _a = (0, core_1.omitThemingProps)(mergedProps), { checked, className, defaultChecked, disabled, id, innerLabelOff, innerLabelOn, inputProps, inputRef, name, onBlur, onChange, onFocus, required, value } = _a, rest = __rest(_a, ["checked", "className", "defaultChecked", "disabled", "id", "innerLabelOff", "innerLabelOn", "inputProps", "inputRef", "name", "onBlur", "onChange", "onFocus", "required", "value"]);
    const { current: isControlled } = (0, react_1.useRef)(checked !== undefined);
    const [isChecked, setIsChecked] = (0, react_1.useState)(checked !== null && checked !== void 0 ? checked : defaultChecked);
    const [isFocused, setIsFocused] = (0, react_1.useState)(false);
    const styles = (0, core_1.useStyleConfig)('Switch', (0, context_1.useSwitchContext)());
    const _b = styles.button, { thumb: thumbStyles, track: trackStyles } = _b, buttonStyles = __rest(_b, ["thumb", "track"]);
    (0, react_1.useEffect)(() => {
        isControlled && setIsChecked(checked);
    }, [checked, isControlled]);
    function handleOnBlur(e) {
        setIsFocused(false);
        onBlur === null || onBlur === void 0 ? void 0 : onBlur(e);
    }
    function handleOnChange(e) {
        !isControlled && setIsChecked(e.target.checked);
        onChange === null || onChange === void 0 ? void 0 : onChange(e);
    }
    function handleOnFocus(e) {
        setIsFocused(true);
        onFocus === null || onFocus === void 0 ? void 0 : onFocus(e);
    }
    const hDiff = (thumbStyles.h - trackStyles.h) / 2;
    const thumbOffset = `calc(100% - ${Math.abs(hDiff - thumbStyles.h)}px)`;
    const labelOffset = `${thumbStyles.h - hDiff + 4}px`;
    const aliasedProps = (0, utils_1.filterUndefined)({
        'aria-disabled': disabled,
        'data-focused': isFocused ? true : false,
    });
    const thumbAliasedProps = (0, utils_1.filterUndefined)({
        left: isChecked ? thumbOffset : -hDiff,
        ring: isFocused ? thumbStyles.ring : 0,
    });
    const trackAliasedProps = (0, utils_1.filterUndefined)({
        bg: isChecked ? trackStyles.bg : innerLabelOff ? consts_1.switchColors.offBgContrast : consts_1.switchColors.offBg,
        pl: isChecked ? 1 : labelOffset,
        pr: isChecked ? labelOffset : 1,
        ring: !disabled ? (isFocused ? trackStyles.ring : 0) : 3,
    });
    return ((0, jsx_runtime_1.jsxs)(exports.SwitchButtonBase, Object.assign({ className: (0, utils_1.cs)('vui-switchButton', className), ref: ref }, buttonStyles, aliasedProps, rest, { children: [(0, jsx_runtime_1.jsx)(SwitchInput, Object.assign({ className: "vui-switchInput", onBlur: handleOnBlur, onChange: handleOnChange, onFocus: handleOnFocus, ref: inputRef, tabIndex: -1, type: "checkbox", checked, defaultChecked, disabled, id, name, required, value }, inputProps)), (0, jsx_runtime_1.jsxs)(SwitchTrack, Object.assign({ className: "vui-switchTrack", tabIndex: 0 }, trackStyles, trackAliasedProps, { children: [!isChecked && innerLabelOff, (0, jsx_runtime_1.jsx)(SwitchThumb, Object.assign({ className: "vui-switchThumb" }, thumbStyles, thumbAliasedProps)), isChecked && innerLabelOn] }))] })));
});
exports.SwitchButton.displayName = 'SwitchButton';
exports.default = exports.SwitchButton;
//# sourceMappingURL=switchButton.js.map