/*! © 2026 Yahoo, Inc. UDS v0.0.0-development */
"use client";
import { cx, getStyles } from "../../../styles/styler.js";
import { FormLabel } from "../../FormLabel.js";
import { VARIANT_ERROR_MAP } from "./radioConstants.js";
import { useRadioGroup } from "./useRadioGroup.js";
import { forwardRef, useCallback, useId, useMemo, useRef, useState } from "react";
import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
//#region src/components/client/Radio/RadioBase.tsx
const RadioBase = forwardRef(function RadioBase({ id, name: nameProp, label, labelPosition = "start", variant: variantProp = "primary", size = "md", reduceMotion: _reduceMotion, value: valueProp = "", checked: checkedProp, defaultChecked, disabled, hasError, onChange, onFocus, onBlur, className, style, slotProps, cssAnimationDuration, enableInteractionTracking = false, renderRoot, renderIndicator, ...radioProps }, parentRef) {
	const generatedId = useId();
	const uid = id ?? `uds-radio-${generatedId}`;
	const rootSlotProps = slotProps?.root ?? {};
	const radioSlotProps = slotProps?.radio ?? {};
	const radioIconSlotProps = slotProps?.radioIcon ?? {};
	const labelSlotProps = slotProps?.label ?? {};
	const innerRef = useRef(null);
	/**
	* State
	*/
	const { name, isControlled, checked, setGroupValue } = useRadioGroup({
		name: nameProp,
		value: valueProp,
		checked: checkedProp,
		defaultChecked
	});
	const [isHovered, setIsHovered] = useState(false);
	const [isPressed, setIsPressed] = useState(false);
	/**
	* Derived values
	*/
	const variant = useMemo(() => hasError ? VARIANT_ERROR_MAP[variantProp] : variantProp, [hasError, variantProp]);
	const showHoverEffect = enableInteractionTracking && !disabled && isHovered;
	const showPressedEffect = enableInteractionTracking && !disabled && !checked && isPressed;
	/**
	* Handlers
	*/
	const handleOnChange = useCallback((e) => {
		setGroupValue(e.target.value);
		onChange?.(e);
	}, [onChange, setGroupValue]);
	const handleFocus = useCallback((e) => {
		onFocus?.(e);
	}, [onFocus]);
	const handleBlur = useCallback((e) => {
		onBlur?.(e);
	}, [onBlur]);
	const handleHoverStart = useCallback(() => {
		if (enableInteractionTracking) setIsHovered(true);
	}, [enableInteractionTracking]);
	const handleHoverEnd = useCallback(() => {
		if (enableInteractionTracking) setIsHovered(false);
	}, [enableInteractionTracking]);
	const handleTapStart = useCallback(() => {
		if (enableInteractionTracking) setIsPressed(true);
	}, [enableInteractionTracking]);
	const handleTapEnd = useCallback(() => {
		if (enableInteractionTracking) setIsPressed(false);
	}, [enableInteractionTracking]);
	const classNames = {
		root: getStyles({
			radioSizeRoot: size,
			radioVariantValueRoot: checked ? "checked" : "unchecked",
			radioVariantRoot: variant,
			display: "flex",
			flexDirection: labelPosition === "start" ? "row" : "row-reverse",
			alignItems: "center",
			className: cx([{
				"cursor-pointer": !disabled,
				"cursor-default": disabled,
				"opacity-50": disabled
			}, className])
		}),
		htmlRadio: cx("cursor-[inherit]", "absolute", "opacity-0", "top-1/2", "left-1/2", "w-[calc(100%+2px)]", "h-[calc(100%+2px)]", "transform", "translate-x-[-50%]", "translate-y-[-50%]"),
		label: cx(labelPosition === "start" ? "text-start" : "text-end")
	};
	const input = /* @__PURE__ */ jsx("input", {
		type: "radio",
		tabIndex: 0,
		...radioProps,
		ref: (ref) => {
			innerRef.current = ref;
			if (typeof parentRef === "function") parentRef(ref);
			else if (parentRef !== null) parentRef.current = ref;
		},
		onFocus: handleFocus,
		onBlur: handleBlur,
		id: uid,
		name,
		value: valueProp,
		disabled,
		"aria-invalid": hasError,
		onChange: handleOnChange,
		...isControlled ? { checked } : { defaultChecked },
		className: classNames.htmlRadio
	});
	return renderRoot({
		className: classNames.root,
		style,
		rootSlotProps,
		hasLabel: Boolean(label),
		isPressed,
		onHoverStart: handleHoverStart,
		onHoverEnd: handleHoverEnd,
		onTapStart: handleTapStart,
		onTapEnd: handleTapEnd,
		children: /* @__PURE__ */ jsxs(Fragment$1, { children: [renderIndicator({
			size,
			variant,
			checked: Boolean(checked),
			disabled,
			showHoverEffect,
			showPressedEffect,
			cssAnimationDuration,
			radioSlotProps,
			radioIconSlotProps,
			children: input
		}), label && /* @__PURE__ */ jsx(FormLabel, {
			as: "div",
			variant: "inherit",
			color: "inherit",
			label,
			className: classNames.label,
			...labelSlotProps
		})] })
	});
});
RadioBase.displayName = "RadioBase";
//#endregion
export { RadioBase };
