import { t as e } from "../../chunks/clsx.js";
import { useInternalStatus as t } from "../hooks/useInternalStatus.js";
import { calculateCursorPosition as n, extractDigits as r, formatPhoneDigits as i, formatWithPattern as a, getLiteralPrefixInfo as o, stripLiteralPrefix as s } from "../helpers/phone/formatters.js";
import { useCallback as c, useEffect as l, useId as u, useRef as d, useState as f } from "react";
import { Icon as p } from "@clubmed/trident-icons";
import { jsx as m, jsxs as h } from "react/jsx-runtime";
//#region lib/ui/forms/PhoneFieldFullInput.tsx
var g = (e) => {
	let { externalValue: t, pattern: u, onChange: p } = e, m = d(null), h = d(null), [g, _] = f("");
	return l(() => {
		h.current !== null && m.current && (m.current.setSelectionRange(h.current, h.current), h.current = null);
	}, [g]), l(() => {
		t && typeof t == "object" && "full" in t && _(t.full || "");
	}, [t]), {
		inputRef: m,
		value: g,
		onKeyDown: c((e) => {
			if (e.key !== "Backspace" && e.key !== "Delete") return;
			let t = e.currentTarget.selectionStart || 0;
			if (t !== (e.currentTarget.selectionEnd || 0)) return;
			let { literalPrefixDigits: i } = o(u), c = e.key === "Backspace" ? g[t - 1] : g[t];
			if (!c || /\d/.test(c)) return;
			e.preventDefault();
			let l = s(r(g), i), d = s(r(g.substring(0, t)), i).length, f, m;
			if (e.key === "Backspace") {
				if (d === 0) return;
				f = l.slice(0, d - 1) + l.slice(d), m = d - 1;
			} else {
				if (d >= l.length) return;
				f = l.slice(0, d) + l.slice(d + 1), m = d;
			}
			let v = a(f, u);
			h.current = n(m, v, i), _(v), p?.(e.nativeEvent, {
				full: v,
				raw: r(v)
			});
		}, [
			u,
			g,
			p
		]),
		onInputChange: c((e) => {
			let t = i(e.target.value, u, e.target.selectionStart || 0);
			t && (h.current = t.nextCursor, _(t.formatted), p?.(e.nativeEvent, {
				full: t.formatted,
				raw: r(t.formatted)
			}));
		}, [u, p])
	};
}, _ = ({ id: n, name: r, value: i, pattern: a = "## ## ## ## ##", placeholder: o = "", icon: s, iconType: c, disabled: l = !1, required: d = !1, validationStatus: f = "default", onChange: _, ...v }) => {
	let y = u(), b = n ?? y, x = r ?? b, S = t({
		isDisabled: l,
		validationStatus: f
	}), { inputRef: C, value: w, onKeyDown: T, onInputChange: E } = g({
		externalValue: i,
		pattern: a,
		onChange: _
	});
	return /* @__PURE__ */ h("div", {
		className: "relative",
		children: [/* @__PURE__ */ m("input", {
			...v,
			ref: C,
			id: b,
			name: x,
			type: "tel",
			disabled: l,
			required: d,
			value: w,
			onChange: E,
			onKeyDown: T,
			placeholder: o,
			className: e("text-b3 rounded-pill w-full border overflow-hidden px-20 py-12 font-normal outline-none", {
				"border-middleGrey focus:border-black active:border-black": S === "default",
				"ps-[52px]": s,
				"pe-[52px]": S === "error" || S === "success",
				"bg-white text-black": S !== "disabled",
				"bg-pearl border-middleGrey": S === "disabled",
				"border-red": S === "error",
				"border-green": S === "success"
			}),
			"aria-label": x
		}), /* @__PURE__ */ h("div", {
			className: e("pointer-events-none absolute inset-0 flex items-center justify-between px-20 py-12", {
				"text-grey": S === "disabled",
				"text-red": S === "error",
				"text-green": S === "success"
			}),
			children: [s && /* @__PURE__ */ m(p, {
				name: s,
				width: "24px"
			}), /* @__PURE__ */ h("span", {
				className: "ms-auto flex gap-x-8",
				children: [S === "error" && /* @__PURE__ */ m(p, {
					name: "CrossDefault",
					width: "24px",
					type: c
				}), S === "success" && /* @__PURE__ */ m(p, {
					name: "CheckDefault",
					width: "24px",
					type: c
				})]
			})]
		})]
	});
};
//#endregion
export { _ as PhoneFieldFullInput };

//# sourceMappingURL=PhoneFieldFullInput.js.map