import { useEnvironment } from "../contexts/EnvironmentContext.js";
import { localizationKeys } from "../localization/localizationKeys.js";
import { usePassword } from "../hooks/usePassword.js";
import eye_default from "../icons/eye.js";
import eye_slash_default from "../icons/eye-slash.js";
import { useLocalizations } from "../localization/makeLocalizable.js";
import { descriptors } from "../customizables/elementDescriptors.js";
import { Flex, Input } from "../customizables/index.js";
import { IconButton } from "./IconButton.js";
import { mergeRefs } from "../utils/mergeRefs.js";
import React, { forwardRef, useRef, useState } from "react";
import { DEBOUNCE_MS } from "@clerk/shared/internal/clerk-js/constants";
import { jsx, jsxs } from "@emotion/react/jsx-runtime";

//#region src/elements/PasswordInput.tsx
const PasswordInput = forwardRef((props, ref) => {
	const [hidden, setHidden] = React.useState(true);
	const { id, onChange: onChangeProp, validatePassword: validatePasswordProp = false, setInfo, setSuccess, setWarning, setError, setHasPassedComplexity, tabIndex,...rest } = props;
	const inputRef = useRef(null);
	const [timeoutState, setTimeoutState] = useState(null);
	const { userSettings: { passwordSettings } } = useEnvironment();
	const { t } = useLocalizations();
	const { validatePassword } = usePassword({
		...passwordSettings,
		validatePassword: validatePasswordProp
	}, {
		onValidationSuccess: () => setSuccess(t(localizationKeys("unstable__errors.zxcvbn.goodPassword"))),
		onValidationError: (message) => setError(message),
		onValidationWarning: (message) => setWarning(message),
		onValidationInfo: (message) => {
			if (!inputRef.current) return;
			if (inputRef.current === document.activeElement) setInfo(message);
			else setError(message);
		},
		onValidationComplexity: (hasPassed) => setHasPassedComplexity(hasPassed)
	});
	const onChange = (e) => {
		if (timeoutState) clearTimeout(timeoutState);
		setTimeoutState(setTimeout(() => {
			validatePassword(e.target.value);
		}, DEBOUNCE_MS));
		return onChangeProp?.(e);
	};
	return /* @__PURE__ */ jsxs(Flex, {
		elementDescriptor: descriptors.formFieldInputGroup,
		direction: "col",
		justify: "center",
		sx: { position: "relative" },
		children: [/* @__PURE__ */ jsx(Input, {
			...rest,
			tabIndex,
			onChange,
			onBlur: (e) => {
				rest.onBlur?.(e);
				validatePassword(e.target.value);
			},
			onFocus: (e) => {
				rest.onFocus?.(e);
				validatePassword(e.target.value);
			},
			ref: mergeRefs(ref, inputRef),
			type: hidden ? "password" : "text",
			sx: (theme) => ({ paddingRight: theme.space.$10 })
		}), /* @__PURE__ */ jsx(IconButton, {
			elementDescriptor: descriptors.formFieldInputShowPasswordButton,
			iconElementDescriptor: descriptors.formFieldInputShowPasswordIcon,
			"aria-label": `${hidden ? "Show" : "Hide"} password`,
			variant: "ghost",
			size: "xs",
			tabIndex,
			onClick: () => setHidden((s) => !s),
			sx: (theme) => ({
				position: "absolute",
				right: 0,
				marginRight: theme.space.$1,
				color: theme.colors.$neutralAlpha400
			}),
			icon: hidden ? eye_default : eye_slash_default
		})]
	});
});

//#endregion
export { PasswordInput };
//# sourceMappingURL=PasswordInput.js.map