import type { JSX } from "@solidjs/web";
/**
 * `<Autocomplete.Value>` — displays the current input value (the
 * autocomplete's source of truth). Render-function children receive
 * `(value: string)` matching React's `AutocompleteValue`.
 */

import { createMemo } from "solid-js";
import { useComboboxRootContext } from "../../combobox/root/combobox-root-context";

export interface AutocompleteValueProps {
	children?: ((value: string) => JSX.Element) | JSX.Element;
}

export function AutocompleteValue(props: AutocompleteValueProps): JSX.Element {
	const root = useComboboxRootContext();

	const resolved = createMemo<JSX.Element>(() => {
		const value = String(root.inputValue());
		if (typeof props.children === "function") {
			return (props.children as (v: string) => JSX.Element)(value);
		}
		if (props.children != null) return props.children as JSX.Element;
		return value as JSX.Element;
	});

	return <>{resolved()}</>;
}