import type { JSX } from "@solidjs/web";
import { For } from "solid-js";
import { useComboboxRootContext } from "../root/combobox-root-context";
import { useGroupCollectionContext } from "./group-collection-context";

export type ComboboxCollectionState = Record<string, never>;

export interface ComboboxCollectionProps<Item = unknown> {
	/**
	 * Per-item render function. Receives `(item, index)` and returns the
	 * JSX for that item (typically a `<Combobox.Item>`).
	 */
	children: (item: Item, index: number) => JSX.Element;
}

/**
 * Renders filtered list items. Doesn't render its own HTML element.
 *
 * When placed inside a `<Combobox.Group>` context that publishes its own
 * sub-items, iterates those; otherwise iterates the root's
 * `filteredItems()` (flat). For grouped items, callers typically render a
 * `<Combobox.Group>` per group and put a `<Combobox.Collection>` inside
 * each — or use the `<Combobox.List>` render-function shorthand which
 * React also exposes.
 */
export function ComboboxCollection<Item = unknown>(
	props: ComboboxCollectionProps<Item>,
): JSX.Element {
	const root = useComboboxRootContext();
	const groupContext = useGroupCollectionContext();

	const items = (): Item[] => {
		if (groupContext) return groupContext.items() as Item[];
		return root.flatFilteredItems() as Item[];
	};

	return (
		<For each={items()}>
			{(item, index) => props.children(item as Item, index())}
		</For>
	);
}