import type { JSX } from "@solidjs/web";
import { Show } from "solid-js";
import type { FloatingPortalTarget } from "../../internals/floating-ui/components/floating-portal";
import { FloatingPortal } from "../../internals/floating-ui/components/floating-portal";
import { useSelectRootContext } from "../select-root-context";
import { SelectPortalContext } from "./select-portal-context";

export interface SelectPortalProps {
	children?: JSX.Element;
	/** Whether to keep the portal mounted while the popup is hidden. */
	keepMounted?: boolean | undefined;
	/** Mount target for the portal. Defaults to `document.body`. */
	container?: FloatingPortalTarget;
}

/**
 * `<Select.Portal>` — moves the popup subtree to a different part of the
 * DOM (by default `document.body`). Mirrors React's `SelectPortal`.
 */
export function SelectPortal(props: SelectPortalProps): JSX.Element {
	const root = useSelectRootContext();
	const keepMounted = (): boolean => props.keepMounted ?? false;
	const shouldRender = (): boolean => root.mounted() || keepMounted();

	return (
		<Show when={shouldRender()}>
			<SelectPortalContext value={keepMounted}>
				<FloatingPortal container={props.container}>
					{props.children}
				</FloatingPortal>
			</SelectPortalContext>
		</Show>
	);
}