"use client";
/*! © 2026 Yahoo, Inc. UDS v0.0.0-development */
import { cx, getStyles } from "../../../styles/styler.js";
import { Box } from "../../Box.js";
import { FormLabel } from "../../FormLabel.js";
import { IconSlot } from "../../IconSlot.js";
import { AvoidMotionLibraryProvider } from "./AvoidMotionLibraryProvider.js";
import { SpringMotionConfig } from "../../client/SpringMotionConfig.js";
import React, { forwardRef, useCallback, useEffect, useId, useRef, useState } from "react";
import { jsx, jsxs } from "react/jsx-runtime";
import * as m from "motion/react-m";

//#region src/components/experimental/client/SwitchV2.tsx
const loadFeatures = () => import("@yahoo/uds/__private/motionFeatures/domMax").then(({ domMax }) => domMax);
const MotionBox = m.create(Box);
/**
* **⚙️️ An switch.
*
* @componentType Client component
*
* @description
* A switch (also called a toggle) is a binary on/off input control. It is clickable or touchable on mobile devices allowing users to pick between two clearly opposite choices.
*
* @see
* Check out the {@link https://uds.build/docs/components/switch Switch Docs} for more info
*
* @usage
* - Forms: switch
*
* @example
* ```tsx
* 'use client';
* import { Switch } from "@yahoo/uds";
*
* <Switch label="Name" required />
*```
*
* @related [Checkbox](https://uds.build/docs/components/checkbox).
**/
const SwitchV2 = forwardRef(function Switch({ id, isOn: isOnProp, defaultIsOn, onChange, label, labelPosition = "start", size = "md", onIcon, offIcon, reduceMotion: forceReduceMotion, disabled, required, onFocus, onBlur, className, layerClassNames, ...switchProps }, parentRef) {
	const generatedId = useId();
	const uid = id ?? `uds-input-${generatedId}`;
	const innerRef = useRef(null);
	/**
	* State
	*/
	const isControlled = isOnProp !== void 0;
	const [isOn, setIsOn] = useState(isControlled ? isOnProp : defaultIsOn);
	/**
	* Handlers
	*/
	const handleChange = useCallback((e) => {
		onChange?.(e);
		if (!isControlled) setIsOn(e.target.checked);
	}, [isControlled, onChange]);
	const handleFocus = useCallback((e) => {
		onFocus?.(e);
	}, [onFocus]);
	const handleBlur = useCallback((e) => {
		onBlur?.(e);
	}, [onBlur]);
	const reduceMotion = forceReduceMotion ? "always" : "user";
	const cssAnimationDuration = forceReduceMotion ? "duration-0" : "duration-120 motion-reduce:duration-0";
	/**
	* Effects
	*/
	useEffect(() => {
		if (isControlled) setIsOn(isOnProp);
	}, [isOnProp, isControlled]);
	const classNames = {
		root: getStyles({
			switchSizeRoot: size,
			switchVariantRoot: "default",
			switchVariantActiveRoot: isOn ? "on" : "off",
			className: cx("group", "flex", "items-center", labelPosition === "start" ? "flex-row" : "flex-row-reverse", ...disabled ? ["cursor-default", "opacity-50"] : ["cursor-pointer"], layerClassNames?.root, className)
		}),
		switch: getStyles({
			switchVariantSwitch: "default",
			switchSizeSwitch: size,
			switchVariantActiveSwitch: isOn ? "on" : "off",
			className: cx("uds-ring", "uds-ring-within", "relative", "uds-border-radius-full", "items-center", cssAnimationDuration, "transition-[background-color,box-shadow]", layerClassNames?.switch)
		}),
		handleContainer: cx("pointer-events-none", "relative", "w-full", "h-full"),
		handle: getStyles({
			switchSizeHandle: size,
			className: cx("absolute", "top-0", "bottom-0", isOn ? "right-0" : "left-0", layerClassNames?.handle)
		}),
		handleContents: cx("relative", "w-full", "h-full", "uds-border-radius-full", "overflow-hidden", !disabled && "group-hover:scale-105", "opacity-95", !disabled && "group-hover:opacity-100", cssAnimationDuration, "transition-[transform,opacity]"),
		handleCircle: getStyles({
			switchVariantActiveHandle: isOn ? "on" : "off",
			switchVariantHandle: "default",
			className: cx("absolute", "top-0", "left-0", "right-0", "bottom-0")
		}),
		handleIcon: getStyles({
			switchSizeHandleIcon: size,
			switchVariantHandleIcon: "default",
			switchVariantActiveHandleIcon: isOn ? "on" : "off",
			className: cx("absolute", "opacity-0", "top-1/2", "left-1/2", "transform", "translate-x-[-50%]", "translate-y-[-50%]", cssAnimationDuration, "transition-opacity")
		}),
		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", layerClassNames?.label)
	};
	return /* @__PURE__ */ jsx(SpringMotionConfig, {
		reducedMotion: reduceMotion,
		loadFeatures,
		layoutVariant: "bouncy",
		layoutSpeed: "4",
		children: /* @__PURE__ */ jsxs(label ? "label" : "div", {
			className: classNames.root,
			"data-testid": "switch-root",
			tabIndex: -1,
			children: [/* @__PURE__ */ jsxs(Box, {
				className: classNames.switch,
				children: [/* @__PURE__ */ jsx("input", {
					type: "checkbox",
					...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,
					style: {}
				}), /* @__PURE__ */ jsx(Box, {
					className: classNames.handleContainer,
					children: /* @__PURE__ */ jsx(MotionBox, {
						className: classNames.handle,
						layout: "position",
						layoutDependency: isOn,
						children: /* @__PURE__ */ jsxs(Box, {
							className: classNames.handleContents,
							children: [
								/* @__PURE__ */ jsx(Box, { className: classNames.handleCircle }),
								onIcon && /* @__PURE__ */ jsx(IconSlot, {
									icon: onIcon,
									iconProps: {
										variant: "fill",
										size: "sm"
									},
									"data-testid": "on-icon",
									className: cx(classNames.handleIcon, isOn ? "opacity-100" : "opacity-0")
								}),
								offIcon && /* @__PURE__ */ jsx(IconSlot, {
									icon: offIcon,
									iconProps: {
										variant: "fill",
										size: "sm"
									},
									"data-testid": "off-icon",
									className: cx(classNames.handleIcon, !isOn ? "opacity-100" : "opacity-0")
								})
							]
						})
					})
				})]
			}), label && /* @__PURE__ */ jsx(FormLabel, {
				as: "div",
				variant: "inherit",
				color: "inherit",
				required,
				label,
				className: classNames.label
			})]
		})
	});
});
SwitchV2.displayName = "SwitchV2";
const SwitchV2AvoidMotionLibraryProvider = AvoidMotionLibraryProvider;

//#endregion
export { SwitchV2, SwitchV2AvoidMotionLibraryProvider };