/*! © 2026 Yahoo, Inc. UDS v0.0.0-development */
"use client";
import { cx, getStyles } from "../../../styles/styler.js";
import { Box } from "../../Box.js";
import { FormLabel } from "../../FormLabel.js";
import { SIZE_MAP } from "./switchStyles.js";
import { forwardRef, useCallback, useId, useMemo, useRef, useState } from "react";
import { jsx, jsxs } from "react/jsx-runtime";
//#region src/components/client/Switch/SwitchBase.tsx
const SwitchBase = forwardRef(function SwitchBase({ id, isOn: isOnProp, defaultIsOn, onChange, label, labelPosition = "start", size = "md", onIcon, offIcon, disabled, required, onFocus, onBlur, className, style, slotProps, cssAnimationDuration, enableHoverTracking = false, renderHandle, ...switchProps }, parentRef) {
	const generatedId = useId();
	const uid = id ?? `uds-input-${generatedId}`;
	const rootSlotProps = slotProps?.root ?? {};
	const switchSlotProps = slotProps?.switch ?? {};
	const handleSlotProps = slotProps?.handle ?? {};
	const labelSlotProps = slotProps?.label ?? {};
	const innerRef = useRef(null);
	const isControlled = isOnProp !== void 0;
	const [uncontrolledIsOn, setUncontrolledIsOn] = useState(defaultIsOn ?? false);
	const [isHovered, setIsHovered] = useState(false);
	const showHoverEffect = useMemo(() => {
		return enableHoverTracking && !disabled && isHovered;
	}, [
		disabled,
		enableHoverTracking,
		isHovered
	]);
	const { isOnX, isOnTranslateClass } = SIZE_MAP[size];
	const isOn = isControlled ? isOnProp ?? false : uncontrolledIsOn;
	const handleChange = useCallback((e) => {
		onChange?.(e);
		if (!isControlled) setUncontrolledIsOn(e.target.checked);
	}, [isControlled, onChange]);
	const handleFocus = useCallback((e) => {
		onFocus?.(e);
	}, [onFocus]);
	const handleBlur = useCallback((e) => {
		onBlur?.(e);
	}, [onBlur]);
	const handleHoverStart = useCallback(() => {
		if (enableHoverTracking) setIsHovered(true);
	}, [enableHoverTracking]);
	const handleHoverEnd = useCallback(() => {
		if (enableHoverTracking) setIsHovered(false);
	}, [enableHoverTracking]);
	const classNames = {
		root: getStyles({
			switchSizeRoot: size,
			switchVariantRoot: "default",
			switchVariantActiveRoot: isOn ? "on" : "off",
			display: "flex",
			flexDirection: labelPosition === "start" ? "row" : "row-reverse",
			alignItems: "center",
			className: cx("group", {
				"cursor-pointer": !disabled,
				"cursor-default": disabled,
				"opacity-50": disabled
			}, className)
		}),
		switch: getStyles({
			switchVariantSwitch: "default",
			switchSizeSwitch: size,
			switchVariantActiveSwitch: isOn ? "on" : "off",
			borderRadius: "full",
			position: "relative",
			alignItems: "center",
			className: cx("uds-ring", "uds-ring-within", cssAnimationDuration, "transition-[background-color,box-shadow]")
		}),
		htmlCheckbox: 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")
	};
	return /* @__PURE__ */ jsxs(label ? "label" : "div", {
		className: classNames.root,
		"data-testid": "container",
		style,
		tabIndex: -1,
		onPointerEnter: handleHoverStart,
		onPointerLeave: handleHoverEnd,
		...rootSlotProps,
		children: [/* @__PURE__ */ jsxs(Box, {
			className: classNames.switch,
			...switchSlotProps,
			children: [/* @__PURE__ */ jsx("input", {
				type: "checkbox",
				tabIndex: 0,
				...switchProps,
				ref: (ref) => {
					innerRef.current = ref;
					if (typeof parentRef === "function") parentRef(ref);
					else if (parentRef !== null) parentRef.current = ref;
				},
				onFocus: handleFocus,
				onBlur: handleBlur,
				id: uid,
				disabled,
				required,
				checked: isControlled ? isOn : void 0,
				defaultChecked: isControlled ? void 0 : defaultIsOn,
				onChange: handleChange,
				className: classNames.htmlCheckbox
			}), renderHandle({
				size,
				isOn,
				isOnX,
				isOnTranslateClass,
				showHoverEffect,
				disabled,
				onIcon,
				offIcon,
				cssAnimationDuration,
				handleSlotProps
			})]
		}), label && /* @__PURE__ */ jsx(FormLabel, {
			as: "div",
			variant: "inherit",
			color: "inherit",
			required,
			label,
			className: classNames.label,
			...labelSlotProps
		})]
	});
});
SwitchBase.displayName = "SwitchBase";
//#endregion
export { SwitchBase };
