import { t as e } from "../../../chunks/clsx.js";
import { useInternalStatus as t } from "../../hooks/useInternalStatus.js";
import { FormControl as n } from "../FormControl.js";
import { useValue as r } from "../../hooks/useValue.js";
import { ValidationMessage as i } from "./ValidationMessage.js";
import { useEffect as a, useId as o, useState as s } from "react";
import { Icon as c } from "@clubmed/trident-icons";
import { jsx as l, jsxs as u } from "react/jsx-runtime";
//#region lib/ui/forms/password/Password.tsx
function d(d) {
	let f = o(), { id: p = f, name: m = p, label: h, value: g, disabled: _ = !1, required: v = !1, hideRequiredStar: y, validationStatus: b = "default", errorMessage: x, validationMessages: S = [], withoutFieldValidation: C = !1, className: w, onChange: T, dataTestId: E = "Password", ...D } = d, O = t({
		isDisabled: _,
		validationStatus: b
	}), { value: k, setValue: A } = r({
		initialValue: g,
		onChange: T
	}), [j, M] = s("password");
	a(() => {
		M(_ ? "password" : j);
	}, [j, _]);
	let N = () => M(j === "password" ? "text" : "password");
	return /* @__PURE__ */ u(n, {
		className: w,
		id: p,
		label: h,
		dataName: "Password",
		dataTestId: E,
		disabled: _,
		required: v,
		hideRequiredStar: y,
		validationStatus: C ? "default" : b,
		errorMessage: x,
		children: [/* @__PURE__ */ u("div", {
			className: "relative",
			children: [/* @__PURE__ */ l("input", {
				...D,
				id: p,
				name: m,
				type: j,
				value: k,
				disabled: _,
				required: v,
				onChange: (e) => A(e.target.value, e.nativeEvent),
				className: e("text-b3 rounded-pill w-full border overflow-hidden ps-20 py-[11px] font-normal outline-none", {
					"border-middleGrey focus:border-black active:border-black pe-[52px]": (C || b === "default") && O !== "disabled",
					"bg-white text-black": O !== "disabled",
					"bg-pearl border-middleGrey": O === "disabled",
					"pe-[84px]": !C && (b === "error" || b === "success"),
					"border-red": !C && b === "error",
					"border-green": !C && b === "success"
				}),
				"aria-label": m
			}), /* @__PURE__ */ l("div", {
				className: e("pointer-events-none absolute inset-0 flex items-center justify-between px-20 py-12"),
				children: /* @__PURE__ */ u("span", {
					className: "ms-auto flex gap-x-8",
					children: [
						!C && b === "error" && /* @__PURE__ */ l(c, {
							name: "CrossDefault",
							color: "red",
							width: "24px"
						}),
						!C && b === "success" && /* @__PURE__ */ l(c, {
							name: "CheckDefault",
							color: "green",
							width: "24px"
						}),
						!_ && /* @__PURE__ */ l("button", {
							type: "button",
							className: "pointer-events-auto size-24 inline-flex",
							onClick: N,
							children: /* @__PURE__ */ l(c, {
								name: j === "password" ? "Invisible" : "Visible",
								width: "24px",
								type: "svg"
							})
						})
					]
				})
			})]
		}), S.length > 0 && /* @__PURE__ */ l("div", {
			className: "flex flex-col gap-[10px] mt-8",
			children: S.map(({ label: e, status: t }, n) => /* @__PURE__ */ l(i, {
				label: e,
				status: t
			}, n))
		})]
	});
}
//#endregion
export { d as Password };

//# sourceMappingURL=Password.js.map