import { jsxs, jsx } from 'react/jsx-runtime';
import React__default, { useId, useState } from 'react';
import { useReducedMotion, motion } from 'motion/react';
import { radioTheme } from './Radio.theme.js';
import { formLabelTheme } from '../FormLabel/FormLabel.theme.js';
import { cn } from '../../../utils/cn.js';
import { useRadioGroupContext } from './RadioContext.js';
import { RadioGroup } from './RadioGroup.js';
import { reducedMotionDotVariants, radioDotVariants } from './Radio.animations.js';

/**
 * Radio component for selecting one option from a group
 */
const RadioComponent = React__default.forwardRef(({ id: idProp, name: nameProp, value, checked: checkedProp, defaultChecked, onChange, label, description, state: stateProp = "default", size: sizeProp = "md", className, ...restProps }, ref) => {
    var _a, _b, _c, _d;
    const autoId = useId();
    const shouldReduceMotion = useReducedMotion();
    const groupContext = useRadioGroupContext();
    // Resolve props from group context or individual props
    const id = idProp !== null && idProp !== void 0 ? idProp : autoId;
    const name = (_b = (_a = groupContext === null || groupContext === void 0 ? void 0 : groupContext.name) !== null && _a !== void 0 ? _a : nameProp) !== null && _b !== void 0 ? _b : autoId;
    const size = (_c = groupContext === null || groupContext === void 0 ? void 0 : groupContext.size) !== null && _c !== void 0 ? _c : sizeProp;
    const state = stateProp === "disabled" ? "disabled" : ((_d = groupContext === null || groupContext === void 0 ? void 0 : groupContext.state) !== null && _d !== void 0 ? _d : stateProp);
    const isDisabled = state === "disabled";
    // Determine checked state
    const isInGroup = groupContext !== undefined;
    const checked = isInGroup ? groupContext.value === value : checkedProp;
    const isControlled = checked !== undefined;
    // Track internal state for uncontrolled radios (defaultChecked)
    const [internalChecked, setInternalChecked] = useState(defaultChecked !== null && defaultChecked !== void 0 ? defaultChecked : false);
    const isChecked = isControlled ? !!checked : internalChecked;
    const handleChange = (e) => {
        if (isDisabled)
            return;
        if (!isControlled) {
            setInternalChecked(e.target.checked);
        }
        if (isInGroup) {
            groupContext.onChange(value);
        }
        onChange === null || onChange === void 0 ? void 0 : onChange(e.target.checked, value);
    };
    const inputProps = isControlled
        ? { checked }
        : { defaultChecked };
    return (jsxs("div", { className: cn(radioTheme.baseStyle, className), ...restProps, children: [jsxs("div", { className: cn(radioTheme.inputContainerStyle, radioTheme.sizes[size]), children: [jsx("input", { ref: ref, type: "radio", id: id, name: name, value: value, ...inputProps, onChange: handleChange, disabled: isDisabled, "aria-describedby": description ? `${id}-description` : undefined, "data-state": isDisabled ? "disabled" : "default", className: cn("peer", radioTheme.inputStyle, radioTheme.sizes[size]) }), jsx(motion.div, { className: cn(radioTheme.dotStyle, isDisabled && "saturate-0 opacity-80", size === "sm" ? "size-2.5" : "size-3"), initial: false, animate: isChecked ? "checked" : "unchecked", variants: shouldReduceMotion ? reducedMotionDotVariants : radioDotVariants })] }), (label || description) && (jsxs("label", { htmlFor: id, className: cn("cursor-pointer", isDisabled && "cursor-not-allowed"), children: [label && (typeof label === 'string' ? (jsx("span", { className: cn(formLabelTheme.baseStyle, formLabelTheme.stateStyles[state], "mb-0"), children: label })) : label), description && (typeof description === 'string' ? (jsx("div", { id: `${id}-description`, className: radioTheme.descriptionStyle, children: description })) : description)] }))] }));
});
RadioComponent.displayName = "Radio";
const Radio = Object.assign(RadioComponent, { Group: RadioGroup });

export { Radio };
