import { n as useTranslation } from "./i18n-DoP1NB7u.js";
import { _ as y, h as q, l as A, p as d, v as u } from "./vendor-preact-DThS2ZQ_.js";
import { r as useIsMobileDeviceWidth } from "./hooks-Da_yP_Dr.js";
import { t as InputComposed } from "./inputComposed-C1R2LAa3.js";
import { i as translateError } from "./radioGroupComposed-TuAWUAFK.js";
import { t as BottomSheet } from "./bottomSheet-CnWbbUAM.js";
//#region src/shared/addressAutocomplete/addressAutocomplete.tsx
var AddressAutocomplete = ({ label, value, error, errorParams, suggestions, readonly, required, labelHint, onChange, onSearch, onSelect, onBlur }) => {
	const { t } = useTranslation();
	const [showSuggestions, setShowSuggestions] = d(false);
	const [isModalOpen, setIsModalOpen] = d(false);
	const [modalQuery, setModalQuery] = d("");
	const [activeIndex, setActiveIndex] = d(-1);
	const [mobileActiveIndex, setMobileActiveIndex] = d(-1);
	const containerRef = A(null);
	const listboxRef = A(null);
	const mobileListboxRef = A(null);
	const listboxId = "ekyc-address-listbox";
	const mobileListboxId = "ekyc-address-mobile-listbox";
	const mobileTitleId = "ekyc-address-modal-title";
	const isMobile = useIsMobileDeviceWidth();
	const translatedLabel = t(label);
	y(() => {
		function handleClickOutside(e) {
			if (containerRef.current && !containerRef.current.contains(e.target)) setShowSuggestions(false);
		}
		document.addEventListener("mousedown", handleClickOutside);
		return () => document.removeEventListener("mousedown", handleClickOutside);
	}, []);
	y(() => {
		setActiveIndex(-1);
		setMobileActiveIndex(-1);
	}, [suggestions]);
	y(() => {
		const ref = isMobile ? mobileListboxRef : listboxRef;
		const idx = isMobile ? mobileActiveIndex : activeIndex;
		if (idx < 0) return;
		ref.current?.children[idx]?.scrollIntoView({ block: "nearest" });
	}, [
		activeIndex,
		mobileActiveIndex,
		isMobile
	]);
	const handleSelect = q((suggestion) => {
		onSelect(suggestion);
		setShowSuggestions(false);
		setIsModalOpen(false);
		setActiveIndex(-1);
		setMobileActiveIndex(-1);
	}, [onSelect]);
	const closeModal = q(() => {
		setIsModalOpen(false);
		setMobileActiveIndex(-1);
	}, []);
	const handleInput = (val) => {
		onChange(val);
		if (val.length >= 3) if (isMobile) {
			setIsModalOpen(true);
			setModalQuery(val);
			onSearch(val);
		} else {
			onSearch(val);
			setShowSuggestions(true);
		}
		else setShowSuggestions(false);
	};
	const createListboxKeyHandler = (getIndex, setIndex, onEscape) => {
		return (e) => {
			if (suggestions.length === 0) return;
			if (e.key === "ArrowDown") {
				e.preventDefault();
				setIndex((i) => i < suggestions.length - 1 ? i + 1 : 0);
			} else if (e.key === "ArrowUp") {
				e.preventDefault();
				setIndex((i) => i > 0 ? i - 1 : suggestions.length - 1);
			} else if (e.key === "Enter" && getIndex() >= 0) {
				e.preventDefault();
				handleSelect(suggestions[getIndex()]);
			} else if (e.key === "Escape" && onEscape) onEscape();
		};
	};
	const handleKeyDown = createListboxKeyHandler(() => activeIndex, setActiveIndex, () => {
		setShowSuggestions(false);
		setActiveIndex(-1);
	});
	const handleMobileKeyDown = createListboxKeyHandler(() => mobileActiveIndex, setMobileActiveIndex);
	const isExpanded = !isMobile && showSuggestions && suggestions.length > 0;
	const activeDescendant = isExpanded && activeIndex >= 0 ? `${listboxId}-option-${activeIndex}` : void 0;
	return /* @__PURE__ */ u("div", {
		className: "IncodeAddressAutocomplete",
		ref: containerRef,
		children: [
			/* @__PURE__ */ u(InputComposed, {
				id: "ekyc-street",
				label: translatedLabel,
				labelHint,
				name: "street",
				value,
				readOnly: readonly,
				required,
				error: translateError(t, error, errorParams),
				onInput: (e) => handleInput(e.target.value),
				onKeyDown: handleKeyDown,
				onBlur,
				role: "combobox",
				"aria-expanded": isExpanded,
				"aria-controls": listboxId,
				"aria-activedescendant": activeDescendant,
				"aria-autocomplete": "list",
				"data-testid": "ekyc-address-input"
			}),
			isExpanded && /* @__PURE__ */ u("ul", {
				ref: listboxRef,
				id: listboxId,
				role: "listbox",
				className: "IncodeAddressAutocompleteSuggestions",
				children: suggestions.map((s, i) => /* @__PURE__ */ u("li", {
					id: `${listboxId}-option-${i}`,
					role: "option",
					"aria-selected": i === activeIndex,
					className: `IncodeAddressAutocompleteSuggestion ${i === activeIndex ? "IncodeAddressAutocompleteSuggestionActive" : ""}`,
					onClick: () => handleSelect(s),
					children: s.label
				}, s.id))
			}),
			isMobile && /* @__PURE__ */ u(BottomSheet, {
				isOpen: isModalOpen,
				onClose: closeModal,
				labelledById: mobileTitleId,
				children: [/* @__PURE__ */ u("div", {
					className: "IncodeAddressAutocompleteModalHeader",
					children: [/* @__PURE__ */ u("h3", {
						id: mobileTitleId,
						children: t("verification.addressSearch")
					}), /* @__PURE__ */ u("button", {
						className: "IncodeAddressAutocompleteModalClose",
						onClick: closeModal,
						type: "button",
						"aria-label": t("common.close"),
						children: "×"
					})]
				}), /* @__PURE__ */ u("div", {
					className: "IncodeAddressAutocompleteModalBody",
					children: [
						/* @__PURE__ */ u("input", {
							className: "IncodeAddressAutocompleteModalInput",
							type: "text",
							value: modalQuery,
							placeholder: t("verification.addressPlaceholder"),
							"aria-label": t("verification.addressSearch"),
							role: "combobox",
							"aria-expanded": suggestions.length > 0,
							"aria-controls": mobileListboxId,
							"aria-activedescendant": mobileActiveIndex >= 0 ? `${mobileListboxId}-option-${mobileActiveIndex}` : void 0,
							"aria-autocomplete": "list",
							onInput: (e) => {
								const val = e.target.value;
								setModalQuery(val);
								if (val.length >= 3) onSearch(val);
							},
							onKeyDown: handleMobileKeyDown,
							autoFocus: true
						}),
						suggestions.length > 0 && /* @__PURE__ */ u("ul", {
							ref: mobileListboxRef,
							id: mobileListboxId,
							role: "listbox",
							className: "IncodeAddressAutocompleteModalSuggestions",
							children: suggestions.map((s, i) => /* @__PURE__ */ u("li", {
								id: `${mobileListboxId}-option-${i}`,
								role: "option",
								"aria-selected": i === mobileActiveIndex,
								className: `IncodeAddressAutocompleteModalSuggestion ${i === mobileActiveIndex ? "IncodeAddressAutocompleteModalSuggestionActive" : ""}`,
								onClick: () => handleSelect(s),
								children: s.label
							}, s.id))
						}),
						/* @__PURE__ */ u("button", {
							className: "IncodeAddressAutocompleteEnterManually",
							onClick: closeModal,
							type: "button",
							children: t("verification.enterManually")
						})
					]
				})]
			})
		]
	});
};
//#endregion
//#region src/shared/utils/optionAccessibleLabel/optionAccessibleLabel.ts
/**
* Strips a single leading flag or pictograph (plus following whitespace) from
* labels so accessible names can mirror visible text without screen readers
* announcing decorative emoji.
*/
var LEADING_DECORATIVE_EMOJI = /^(?:[\u{1F1E6}-\u{1F1FF}]{2}|\p{Extended_Pictographic})\s*/u;
function getAccessibleOptionLabel(label) {
	return label.replace(LEADING_DECORATIVE_EMOJI, "").trimStart();
}
//#endregion
export { AddressAutocomplete as n, getAccessibleOptionLabel as t };
