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 { DEFAULT_PHONE_PREFIXES as c } from "../helpers/phone/defaultPrefixes.js";
import { useCallback as l, useEffect as u, useId as d, useRef as f, useState as p } from "react";
import { Icon as m } from "@clubmed/trident-icons";
import { jsx as h, jsxs as g } from "react/jsx-runtime";
//#region lib/ui/forms/PhoneFieldSplitInput.tsx
var _ = (e) => {
	let { externalValue: t, pattern: c, defaultPrefix: d, onChange: m } = e, h = f(null), g = f(null), [_, v] = p(d), [y, b] = p(""), x = l((e, t, n) => {
		if (t === _ && n === y) return;
		let i = `${t} ${n}`.trim();
		m?.(e, {
			full: i,
			prefix: t,
			number: n,
			raw: r(i)
		});
	}, [
		y,
		m,
		_
	]);
	return u(() => {
		g.current !== null && h.current && (h.current.setSelectionRange(g.current, g.current), g.current = null);
	}, [y]), u(() => {
		t && typeof t == "object" && "full" in t && (v(t.prefix || d), b(t.number || ""));
	}, [t, d]), {
		numberInputRef: h,
		prefix: _,
		number: y,
		onKeyDown: l((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(c), l = e.key === "Backspace" ? y[t - 1] : y[t];
			if (!l || /\d/.test(l)) return;
			e.preventDefault();
			let u = s(r(y), i), d = s(r(y.substring(0, t)), i).length, f, p;
			if (e.key === "Backspace") {
				if (d === 0) return;
				f = u.slice(0, d - 1) + u.slice(d), p = d - 1;
			} else {
				if (d >= u.length) return;
				f = u.slice(0, d) + u.slice(d + 1), p = d;
			}
			let m = a(f, c);
			g.current = n(p, m, i), b(m), x(e.nativeEvent, _, m);
		}, [
			x,
			c,
			y,
			_
		]),
		onInputChange: l((e) => {
			let t = i(e.target.value, c, e.target.selectionStart || 0);
			t && (g.current = t.nextCursor, b(t.formatted), x(e.nativeEvent, _, t.formatted));
		}, [
			x,
			c,
			_
		]),
		onPrefixChange: l((e, t) => {
			v(t), x(e, t, y);
		}, [x, y])
	};
}, v = ({ id: n, name: r, value: i, pattern: a = "## ## ## ## ##", prefixes: o = c, defaultPrefix: s = o[0]?.code || "+1", placeholder: l = "", iconType: u, disabled: f = !1, required: p = !1, validationStatus: v = "default", onChange: y, ...b }) => {
	let x = d(), S = n ?? x, C = r ?? S, w = t({
		isDisabled: f,
		validationStatus: v
	}), { numberInputRef: T, prefix: E, number: D, onKeyDown: O, onInputChange: k, onPrefixChange: A } = _({
		externalValue: i,
		pattern: a,
		defaultPrefix: s,
		onChange: y
	});
	return /* @__PURE__ */ g("div", {
		className: "flex gap-8",
		children: [/* @__PURE__ */ g("div", {
			className: e("relative rounded-pill z-0 w-[130px] flex-shrink-0", {
				"bg-white": w !== "disabled",
				"bg-pearl border-middleGrey": w === "disabled"
			}),
			children: [/* @__PURE__ */ h("select", {
				disabled: f,
				value: E,
				onChange: (e) => A(e.nativeEvent, e.target.value),
				className: e("text-b3 rounded-pill w-full border overflow-hidden px-20 py-12 font-semibold outline-none appearance-none bg-transparent", {
					"border-middleGrey focus:border-black active:border-black": w === "default",
					"text-black": w !== "disabled",
					"bg-pearl border-middleGrey": w === "disabled",
					"border-red": w === "error",
					"border-green": w === "success",
					"pe-[40px]": !0
				}),
				id: `${S}-prefix`,
				"aria-label": `${C}-prefix`,
				children: o.map((e) => /* @__PURE__ */ h("option", {
					value: e.code,
					children: e.label ?? e.code
				}, e.code))
			}), /* @__PURE__ */ h("div", {
				className: "pointer-events-none absolute inset-0 flex items-center justify-end px-20 py-12 -z-1",
				children: /* @__PURE__ */ h(m, {
					name: "ArrowDefaultDown",
					type: "svg",
					width: "24px",
					color: "black"
				})
			})]
		}), /* @__PURE__ */ g("div", {
			className: "relative flex-1",
			children: [/* @__PURE__ */ h("input", {
				...b,
				ref: T,
				type: "tel",
				disabled: f,
				required: p,
				value: D,
				onChange: k,
				onKeyDown: O,
				placeholder: l,
				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": w === "default",
					"pe-[52px]": w === "error" || w === "success",
					"bg-white text-black": w !== "disabled",
					"bg-pearl border-middleGrey": w === "disabled",
					"border-red": w === "error",
					"border-green": w === "success"
				}),
				"aria-label": `${C}-number`
			}), /* @__PURE__ */ h("div", {
				className: e("pointer-events-none absolute inset-0 flex items-center justify-end px-20 py-12", {
					"text-grey": w === "disabled",
					"text-red": w === "error",
					"text-green": w === "success"
				}),
				children: /* @__PURE__ */ g("span", {
					className: "flex gap-x-8",
					children: [w === "error" && /* @__PURE__ */ h(m, {
						name: "CrossDefault",
						width: "24px",
						type: u
					}), w === "success" && /* @__PURE__ */ h(m, {
						name: "CheckDefault",
						width: "24px",
						type: u
					})]
				})
			})]
		})]
	});
};
//#endregion
export { v as PhoneFieldSplitInput };

//# sourceMappingURL=PhoneFieldSplitInput.js.map