import { cx as e } from "../../theme/tools.js";
import { useUiTranslation as t } from "../../i18n/useUiTranslation.js";
import { ChevronDownSvg as n } from "../../icons/ChevronDownSvg.js";
import { actionsContainer as r, container as i, label as a, menu as o, menuOpen as s, menuSeparator as c, optionButton as l, optionDescription as u, optionSelected as d, trigger as f, triggerIcon as p, triggerIconBrand as ee, triggerIconOpen as te, triggerOpen as ne, valueText as re } from "./SimpleSelect.css.js";
import { useCallback as m, useEffect as h, useId as g, useMemo as _, useRef as v, useState as y } from "react";
import { Fragment as b, jsx as x, jsxs as S } from "react/jsx-runtime";
//#region src/components/select/SimpleSelect.tsx
var C = ({ ariaDescribedBy: C, ariaLabel: ie, ariaLabelledBy: ae, ariaInvalid: oe, actionsSlot: w, className: se, fullWidth: ce = !0, isDisabled: T = !1, label: E, onChange: le, options: D, placeholder: O, size: k = "medium", state: A = "default", value: j, variant: M = "default" }) => {
	let { t: N } = t(), [P, F] = y(!1), I = O ?? N("common.select.placeholder"), [L, R] = y(-1), z = v(null), B = v(null), V = v(/* @__PURE__ */ new Map()), H = g(), U = _(() => D.find((e) => e.value === j) ?? null, [D, j]);
	h(() => {
		if (!P) return;
		let e = D.findIndex((e) => e.value === j), t = 0;
		e >= 0 && (t = e), R(t);
	}, [
		P,
		D,
		j
	]), h(() => {
		if (!P || L < 0 || L >= D.length) return;
		let e = D[L];
		e != null && V.current.get(e.id)?.focus();
	}, [
		L,
		P,
		D
	]), h(() => {
		if (!P) return () => {};
		let e = (e) => {
			z.current?.contains(e.target) || F(!1);
		}, t = (e) => {
			e.key === "Escape" && (F(!1), B.current?.focus());
		};
		return document.addEventListener("mousedown", e), window.addEventListener("keydown", t), () => {
			document.removeEventListener("mousedown", e), window.removeEventListener("keydown", t);
		};
	}, [P]), h(() => {
		V.current.clear();
	}, [D]);
	let W = m(() => {
		F(!1), requestAnimationFrame(() => {
			B.current?.focus();
		});
	}, []), ue = () => {
		T || F((e) => !e);
	}, G = (e) => {
		le(e), W();
	}, de = (e) => {
		T || (e.key === "ArrowDown" || e.key === "ArrowUp") && (e.preventDefault(), F(!0));
	}, K = (e) => {
		D.length !== 0 && R((t) => {
			if (t < 0) {
				let t = D.length - 1;
				return e === 1 && (t = 0), t;
			}
			return (t + e + D.length) % D.length;
		});
	}, fe = (e) => {
		switch (e.key) {
			case "ArrowDown":
				e.preventDefault(), K(1);
				break;
			case "ArrowUp":
				e.preventDefault(), K(-1);
				break;
			case "Home":
				e.preventDefault(), R(0);
				break;
			case "End":
				e.preventDefault(), R(D.length - 1);
				break;
			case "Enter":
			case " ":
				if (e.preventDefault(), L >= 0 && L < D.length) {
					let e = D[L];
					e != null && G(e.value);
				}
				break;
			case "Escape":
				e.preventDefault(), F(!1), B.current?.focus();
				break;
			default: break;
		}
	}, pe = (e) => (t) => {
		V.current.set(e, t);
	}, q;
	E != null && (q = `${H}-label`);
	let me = ae ?? q, he = () => typeof w == "function" ? w(W) : w ?? null, ge = D.map((t, n) => {
		let r = t.value === j, i = `${H}-option-${n}`, a = e(l, { [d]: r }), o = -1;
		L === n && (o = 0);
		let s = null;
		return t.description != null && t.description !== "" && (s = /* @__PURE__ */ x("span", {
			className: u,
			children: t.description
		})), /* @__PURE__ */ x("li", {
			role: "presentation",
			children: /* @__PURE__ */ S("button", {
				id: i,
				ref: pe(t.id),
				type: "button",
				role: "option",
				"aria-selected": r,
				className: a,
				tabIndex: o,
				onClick: () => {
					G(t.value);
				},
				onMouseEnter: () => {
					R(n);
				},
				children: [/* @__PURE__ */ x("span", { children: t.label }), s]
			})
		}, t.id);
	}), J;
	L >= 0 && L < D.length && (J = `${H}-option-${L}`);
	let Y = null;
	E != null && (Y = /* @__PURE__ */ x("span", {
		id: q,
		className: a,
		children: E
	}));
	let X;
	P && (X = H);
	let Z = null;
	w != null && (Z = /* @__PURE__ */ S(b, { children: [/* @__PURE__ */ x("li", {
		role: "presentation",
		children: /* @__PURE__ */ x("div", {
			className: c,
			role: "separator"
		})
	}), /* @__PURE__ */ x("li", {
		role: "presentation",
		children: /* @__PURE__ */ x("div", {
			className: r,
			children: he()
		})
	})] }));
	let Q = null;
	P && (Q = /* @__PURE__ */ S("ul", {
		id: H,
		className: e(o, s),
		role: "listbox",
		"aria-activedescendant": J,
		tabIndex: -1,
		onKeyDown: fe,
		children: [ge, Z]
	}));
	let $ = e(f({
		size: k,
		state: A,
		variant: M
	}), { [ne]: P }), _e = e(p, {
		[te]: P,
		[ee]: M === "brand"
	});
	return /* @__PURE__ */ S("div", {
		className: e(i({ fullWidth: ce }), se),
		ref: z,
		children: [
			Y,
			/* @__PURE__ */ S("button", {
				ref: B,
				type: "button",
				className: $,
				"aria-haspopup": "listbox",
				"aria-expanded": P,
				"aria-controls": X,
				"aria-describedby": C,
				"aria-invalid": oe,
				"aria-label": ie,
				"aria-labelledby": me,
				onClick: ue,
				onKeyDown: de,
				disabled: T,
				children: [/* @__PURE__ */ x("span", {
					className: re,
					children: U?.label ?? I
				}), /* @__PURE__ */ x("span", {
					className: _e,
					children: /* @__PURE__ */ x(n, {
						width: 16,
						height: 16,
						"aria-hidden": "true"
					})
				})]
			}),
			Q
		]
	});
};
//#endregion
export { C as SimpleSelect };

//# sourceMappingURL=SimpleSelect.js.map