"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;
};
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.Radio = exports.RadioBase = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = require("react");
const consts_1 = require("../checkbox/consts");
const core_1 = require("../core");
const icon_1 = __importDefault(require("../icon"));
const t_1 = __importDefault(require("../t"));
const utils_1 = require("../utils");
const consts_2 = require("./consts");
const context_1 = require("./context");
const RadioControl = core_1.styled.spanBox `
  border-radius: 50%;
  display: inline-flex;
  flex-shrink: 0;
  position: relative;
  transition-duration: fast;
`;
const RadioInput = core_1.styled.input `
  cursor: inherit;
  height: 100%;
  left: 0;
  margin: 0;
  opacity: 0;
  padding: 0;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: 1;
`;
exports.RadioBase = core_1.styled.labelBox `
  align-items: center;
  cursor: pointer;
  display: inline-flex;
  width: fit-content;

  &:not([aria-disabled='true']):hover .vui-radioControl {
    color: ${p => core_1.th.color(p.controlHoverColor)};
  }

  .vui-radioControl:focus-within {
    color: ${consts_2.radioColors.focus};
  }

  &[aria-disabled='true'] {
    color: ${consts_1.disabled.text};
    cursor: not-allowed;

    .vui-radioControl {
      color: ${consts_1.disabled.icon};
    }
  }
`;
/**
 * Allows selection of a single choice from a set of items. Handles controlled and uncontrolled modes.
 * Uses icons to display itself in different states.
 */
exports.Radio = (0, core_1.vui)((props, ref) => {
    var _a, _b;
    const _c = (_a = (0, context_1.useRadioGroupContext)()) !== null && _a !== void 0 ? _a : {}, { defaultValue: groupDefaultValue, isChecked: groupIsChecked, onChange: groupOnChange, value: groupValue } = _c, radioGroupProps = __rest(_c, ["defaultValue", "isChecked", "onChange", "value"]);
    const defaultIsChecked = groupIsChecked !== undefined ? groupIsChecked === props.value : undefined;
    const mergedProps = Object.assign(Object.assign({}, radioGroupProps), props);
    const _d = (0, core_1.omitThemingProps)(mergedProps), { checked = groupValue !== undefined ? props.value === groupValue : undefined, children, className, defaultChecked = groupDefaultValue !== undefined ? props.value === groupDefaultValue : undefined, disabled, icon: iconProp = 'cuiRadioUnselected', iconChecked = 'cuiRadioSelected', id, inputProps, inputRef, label, name, onChange, required, value } = _d, rest = __rest(_d, ["checked", "children", "className", "defaultChecked", "disabled", "icon", "iconChecked", "id", "inputProps", "inputRef", "label", "name", "onChange", "required", "value"]);
    const [isChecked, setIsChecked] = (0, react_1.useState)((_b = defaultIsChecked !== null && defaultIsChecked !== void 0 ? defaultIsChecked : checked) !== null && _b !== void 0 ? _b : defaultChecked);
    const styles = (0, core_1.useStyleConfig)('Radio', mergedProps);
    const _e = styles.control, { color: controlColor, hoverColor } = _e, controlStyles = __rest(_e, ["color", "hoverColor"]);
    const icon = isChecked ? iconChecked : iconProp;
    const controlMr = children || label ? 1 : 0;
    const color = isChecked ? consts_2.radioColors.checked : controlColor;
    const controlHoverColor = hoverColor ? hoverColor : consts_2.radioColors.hover;
    (0, react_1.useEffect)(() => {
        if (groupIsChecked !== undefined)
            setIsChecked(groupIsChecked === value);
        else if (checked !== undefined)
            setIsChecked(checked);
    }, [checked, groupIsChecked]);
    function handleOnChange(e) {
        groupOnChange === null || groupOnChange === void 0 ? void 0 : groupOnChange(e);
        onChange === null || onChange === void 0 ? void 0 : onChange(e);
    }
    const aliasedProps = (0, utils_1.filterUndefined)({
        'aria-disabled': disabled,
    });
    return ((0, jsx_runtime_1.jsxs)(exports.RadioBase, Object.assign({ className: (0, utils_1.cs)('vui-radio', className), controlHoverColor: controlHoverColor, ref: ref }, styles.container, aliasedProps, rest, { children: [(0, jsx_runtime_1.jsxs)(RadioControl, Object.assign({ bg: "white", className: "vui-radioControl", color: color, focusWithinRing: 3, mr: controlMr }, controlStyles, { children: [(0, jsx_runtime_1.jsx)(RadioInput, Object.assign({ className: "vui-radioInput", onClick: handleOnChange, ref: inputRef, type: "radio", defaultChecked: checked, disabled, id, name, required, value }, inputProps)), (0, jsx_runtime_1.jsx)(icon_1.default, { className: "vui-radioIcon", h: "100%", name: icon, w: "100%" })] })), children !== null && children !== void 0 ? children : (label && ((0, jsx_runtime_1.jsx)(t_1.default, Object.assign({ className: "vui-radioLabel", lineHeight: "normal" }, styles.label, { children: label }))))] })));
});
exports.Radio.displayName = 'Radio';
exports.default = exports.Radio;
//# sourceMappingURL=radio.js.map