/** @license MIT | @cube-dev/ui-kit v0.127.1 | Cube Dev Team */
import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
import { useProviderProps } from "../../../provider.js";
import { ItemAction } from "../../actions/ItemAction/ItemAction.js";
import { EyeIcon } from "../../../icons/EyeIcon.js";
import { EyeInvisibleIcon } from "../../../icons/EyeInvisibleIcon.js";
import { useFieldProps } from "../../form/Form/use-field/use-field-props.js";
import { TextInputBase } from "../TextInput/TextInputBase.js";
import { castNullableStringValue } from "../../../utils/react/nullableValue.js";
import { forwardRef, useCallback, useRef, useState } from "react";
import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
import { useTextField } from "react-aria";

//#region src/components/fields/PasswordInput/PasswordInput.tsx
function PasswordInput(props, ref) {
	props = castNullableStringValue(props);
	props = useProviderProps(props);
	props = useFieldProps(props, {
		defaultValidationTrigger: "onBlur",
		valuePropsMapper: ({ value, onChange }) => ({
			value: value?.toString() ?? "",
			onChange
		})
	});
	let [type, setType] = useState("password");
	let { labelProps: userLabelProps, suffix, multiLine, inputRef: propsInputRef, ...rest } = props;
	let localInputRef = useRef(null);
	let inputRef = propsInputRef ?? localInputRef;
	let { labelProps, inputProps } = useTextField({
		...rest,
		type
	}, inputRef);
	const mergedLabelProps = mergeProps$1(labelProps, userLabelProps);
	const toggleType = useCallback(() => {
		setType((type) => type === "password" ? "text" : "password");
	}, []);
	const wrappedSuffix = /* @__PURE__ */ jsxs(Fragment$1, { children: [suffix, /* @__PURE__ */ jsx(ItemAction, {
		type: "neutral",
		tooltip: "Toggle masking",
		icon: type === "password" ? /* @__PURE__ */ jsx(EyeInvisibleIcon, {}) : /* @__PURE__ */ jsx(EyeIcon, {}),
		onPress: toggleType
	})] });
	return /* @__PURE__ */ jsx(TextInputBase, {
		ref,
		labelProps: mergedLabelProps,
		inputProps: {
			...inputProps,
			"data-input-type": "passwordinput"
		},
		inputRef,
		inputStyles: { paddingRight: "4x" },
		type,
		suffixPosition: "after",
		suffix: wrappedSuffix,
		multiLine,
		...rest
	});
}
/**
* PasswordInputs are password inputs that allow users to input passwords or code entries
* with a keyboard. Various decorations can be displayed around the field to
* communicate the entry requirements.
*/
const _PasswordInput = forwardRef(PasswordInput);
_PasswordInput.cubeInputType = "Text";
_PasswordInput.displayName = "PasswordInput";

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