import { n as AnalyticsId } from "../../constants2.js";
import { t as usePseudoClasses } from "../../usePseudoClasses.js";
import classNames from "classnames";
import React, { useEffect, useId, useState } from "react";
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
import { useAnimate } from "motion/react";
import styles from "./styles.module.scss";
let TogglePosition = /* @__PURE__ */ function(TogglePosition$1) {
	TogglePosition$1["left"] = "left";
	TogglePosition$1["right"] = "right";
	return TogglePosition$1;
}({});
let ToggleOnColor = /* @__PURE__ */ function(ToggleOnColor$1) {
	ToggleOnColor$1["onwhite"] = "onwhite";
	ToggleOnColor$1["onneutral"] = "onneutral";
	ToggleOnColor$1["onblueberry"] = "onblueberry";
	return ToggleOnColor$1;
}({});
var Toggle = ({ checked = false, disabled, label, onChange, onColor = ToggleOnColor.onwhite, statusText, subLabel, togglePosition = TogglePosition.left, testId }) => {
	const [checkedState, setCheckedState] = useState(checked);
	const [showToggleAnimation, setShowToggleAnimation] = useState(false);
	const [scope, animate] = useAnimate();
	const baseId = useId();
	const toggleId = "toggle-" + baseId;
	const inputId = "input-" + baseId;
	const labelId = "label-" + baseId;
	const subLabelId = "sublabel-" + baseId;
	const toggleRef = React.useRef(null);
	const toggleDotRef = React.useRef(null);
	const { refObject, isHovered, isActive } = usePseudoClasses(scope);
	const showHoveredStyling = isHovered && !showToggleAnimation;
	const isOnWhite = onColor === ToggleOnColor.onwhite;
	const animationDuration = disabled ? 0 : .2;
	const dotBackgroundColor = disabled ? "var(--color-disabled-graphics)" : checkedState ? "var(--color-action-graphics-ondark)" : "var(--core-color-neutral-700)";
	const getBackgroundColor = () => {
		if (disabled) return "transparent";
		else if (checkedState && isActive) return "var(--core-color-blueberry-800)";
		else if (checkedState) return showHoveredStyling ? "var(--color-action-graphics-onlight-hover)" : "var(--color-action-graphics-onlight)";
		else if (isOnWhite && isActive) return "var(--core-color-neutral-400)";
		else if (isOnWhite) return showHoveredStyling ? "var(--core-color-neutral-200)" : "var(--core-color-neutral-50)";
		else if (isActive) return "var(--core-color-neutral-200)";
		else return showHoveredStyling ? "var(--core-color-neutral-50)" : "var(--core-color-white)";
	};
	useEffect(() => {
		if (showToggleAnimation) {
			const timer = setTimeout(() => setShowToggleAnimation(false), 300);
			return () => clearTimeout(timer);
		}
	}, [showToggleAnimation]);
	useEffect(() => {
		setCheckedState(checked);
	}, [checked]);
	useEffect(() => {
		if (!toggleRef.current || !toggleDotRef.current) return;
		animate(toggleRef.current, { background: getBackgroundColor() }, {
			duration: animationDuration,
			ease: "easeInOut"
		});
		animate(toggleDotRef.current, { background: dotBackgroundColor }, {
			duration: animationDuration,
			ease: "easeInOut"
		});
		animate(toggleDotRef.current, { x: checkedState ? 16 : 0 }, {
			duration: animationDuration,
			ease: "easeInOut"
		});
		animate("svg", { opacity: checkedState ? 1 : 0 }, {
			duration: animationDuration,
			ease: "easeInOut"
		});
	}, [
		checkedState,
		showHoveredStyling,
		isActive,
		disabled
	]);
	const handleChange = (event) => {
		setCheckedState(event.target.checked);
		setShowToggleAnimation(true);
		onChange?.(event);
	};
	const toggleContainerClassNames = classNames(styles["toggle-container"], {
		[styles["toggle-container--position-right"]]: togglePosition === TogglePosition.right,
		[styles["toggle-container--with-status"]]: statusText !== void 0 && statusText !== null,
		[styles["toggle-container--disabled"]]: disabled
	});
	const subLabelClassNames = classNames(styles["toggle-container__sublabel"]);
	const statusTextClassNames = classNames(styles["toggle-container__status"], { [styles["toggle-container__status--checked"]]: checkedState });
	const toggleClassNames = classNames(styles["toggle-container__toggle"], {
		[styles["toggle-container__toggle--ignore-hover"]]: showToggleAnimation,
		[styles["toggle-container__toggle--on-white"]]: onColor === ToggleOnColor.onwhite
	});
	const toggleDotClassNames = classNames(styles["toggle-container__toggle__dot"], { [styles["toggle-container__toggle__dot--ignore-hover"]]: showToggleAnimation });
	const renderToggle = () => /* @__PURE__ */ jsxs("div", {
		className: styles["toggle-container__outer-toggle"],
		children: [/* @__PURE__ */ jsxs("label", {
			ref: refObject,
			className: styles["toggle-container__toggle-group"],
			children: [/* @__PURE__ */ jsx("input", {
				disabled,
				id: inputId,
				type: "checkbox",
				checked: checkedState,
				onChange: handleChange,
				className: styles["toggle-container__input"],
				"aria-label": label.map((l) => l.text).join(" "),
				"aria-describedby": [subLabel ? subLabelId : null, statusText ? toggleId + "-status" : null].filter(Boolean).join(" ") || void 0,
				role: "switch"
			}), /* @__PURE__ */ jsx("span", {
				id: toggleId,
				ref: toggleRef,
				className: toggleClassNames,
				"aria-hidden": "true",
				children: /* @__PURE__ */ jsx("span", {
					ref: toggleDotRef,
					className: toggleDotClassNames,
					"aria-hidden": "true",
					children: /* @__PURE__ */ jsx("svg", {
						width: "12",
						height: "12",
						viewBox: "0 0 12 12",
						fill: "none",
						xmlns: "http://www.w3.org/2000/svg",
						className: styles["toggle-container__toggle__dot__icon"],
						children: /* @__PURE__ */ jsx("path", {
							d: "M11 2.65247L4.69877 9.34741L1 5.41836",
							strokeWidth: "2.2"
						})
					})
				})
			})]
		}), statusText && /* @__PURE__ */ jsx("span", {
			className: statusTextClassNames,
			id: toggleId + "-status",
			children: checkedState ? statusText.checked : statusText.unchecked
		})]
	});
	const renderLabelText = () => {
		return /* @__PURE__ */ jsxs("div", {
			className: styles["toggle-container__outer-label"],
			children: [/* @__PURE__ */ jsx("span", {
				id: labelId,
				className: styles["toggle-container__label"],
				children: label.map((labelText) => {
					return /* @__PURE__ */ jsx("span", {
						className: classNames({ [styles["toggle-container__label__text--subdued"]]: labelText.type === "subdued" }),
						children: labelText.text
					}, labelId + labelText.text);
				})
			}), subLabel && /* @__PURE__ */ jsx("div", {
				id: subLabelId,
				className: subLabelClassNames,
				children: subLabel
			})]
		});
	};
	return /* @__PURE__ */ jsxs("div", {
		className: toggleContainerClassNames,
		"data-testid": testId,
		"data-analyticsid": AnalyticsId.Toggle,
		children: [togglePosition === TogglePosition.left && /* @__PURE__ */ jsxs(Fragment, { children: [renderToggle(), renderLabelText()] }), togglePosition === TogglePosition.right && /* @__PURE__ */ jsxs(Fragment, { children: [renderLabelText(), renderToggle()] })]
	});
};
var Toggle_default = Toggle;
export { ToggleOnColor, TogglePosition, Toggle_default as default };

//# sourceMappingURL=index.js.map