import { isArray, isReactText } from "../utils/assertion.js";
import { filterUndefined } from "../utils/object.js";
import { cs } from "../utils/styles.js";
import "../utils/index.js";
import { useStyleConfig } from "../core/theme.js";
import { styled } from "../core/styled.js";
import { vui } from "../core/vui.js";
import "../core/index.js";
import { ListProvider } from "./context.js";
import listDivider_default from "./listDivider.js";
import listHeading_default from "./listHeading.js";
import listIcon_default from "./listIcon.js";
import listText_default from "./listText.js";
import listItem_default from "./listItem.js";
import { useEffect, useMemo, useRef, useState } from "react";
import { jsx, jsxs } from "react/jsx-runtime";

//#region src/list/list.tsx
const clickKeys = ["Enter", " "];
const nextKeys = ["ArrowDown", "Tab"];
const prevKeys = ["ArrowUp"];
const ListBase = styled.ulBox``;
/** Displays a list of list link items and optional heading. Exposes some props to the children via context. */
const List = vui((props, ref) => {
	const { children, className, heading, isInteractive, items, size, variant, ...rest } = props;
	const styles = useStyleConfig("List", props);
	const context = useMemo(() => filterUndefined({
		isInteractive,
		size,
		variant
	}), [
		isInteractive,
		size,
		variant
	]);
	const listRef = useRef(null);
	const [_, setActive] = useState(-1);
	const onKeydown = (event) => {
		if ([
			...prevKeys,
			...nextKeys,
			...clickKeys
		].includes(event.key)) {
			event.preventDefault();
			setActive((a) => {
				let active = a;
				if (listRef.current) {
					const tabIndexedChildren = Array.from(listRef.current.childNodes).filter((child) => child.tabIndex === 0);
					if (nextKeys.includes(event.key) && active < tabIndexedChildren.length - 1) active++;
					if (prevKeys.includes(event.key)) active = active > 0 ? active - 1 : 0;
					tabIndexedChildren.forEach((node, index) => {
						if (index === active) if (clickKeys.includes(event.key)) node?.click();
						else node?.focus();
					});
				}
				return active;
			});
		}
	};
	useEffect(() => {
		if (listRef.current && isInteractive) {
			listRef.current.addEventListener("keydown", onKeydown);
			return () => {
				listRef.current?.removeEventListener("keydown", onKeydown);
			};
		}
	}, [listRef.current, isInteractive]);
	return /* @__PURE__ */ jsx(ListProvider, {
		value: context,
		children: /* @__PURE__ */ jsxs(ListBase, {
			className: cs("vui-list", className),
			ref: ref || listRef,
			...styles.container,
			...rest,
			children: [isReactText(heading) ? /* @__PURE__ */ jsx(listHeading_default, { text: heading }) : heading, children ?? (isArray(items) ? items.map(({ key, ...props$1 }, index) => /* @__PURE__ */ jsx(listItem_default, { ...props$1 }, key ?? index)) : items)]
		})
	});
});
List.Divider = listDivider_default;
List.Heading = listHeading_default;
List.Icon = listIcon_default;
List.Item = listItem_default;
List.Text = listText_default;
List.displayName = "List";
var list_default = List;

//#endregion
export { List, ListBase, list_default as default };
globalThis.__vuiVersion__ = "4.0.0-beta.1"
//# sourceMappingURL=list.js.map