import type { JSX } from "@solidjs/web";
/**
 * `<Tooltip.Portal>` — Solid 2 port of Base UI React's `TooltipPortal`
 * (`packages/react/src/tooltip/portal/TooltipPortal.tsx`). See
 * `<Popover.Portal>` for the shared rationale; the tooltip port differs
 * only in which root context it reads.
 */

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 { useTooltipRootContext } from "../tooltip-root-context";
import { TooltipPortalContext } from "./tooltip-portal-context";

export interface TooltipPortalProps {
	/** Portal children. */
	children?: JSX.Element;
	/**
	 * Whether to keep the portal mounted in the DOM while the popup is
	 * hidden. @default false
	 */
	keepMounted?: boolean | undefined;
	/**
	 * Optional mount target for the portal. Defaults to `document.body`.
	 */
	container?: FloatingPortalTarget;
}

/**
 * A portal element that moves the popup to a different part of the DOM.
 * By default, the portal element is appended to `<body>`.
 */
export function TooltipPortal(props: TooltipPortalProps): JSX.Element {
	const root = useTooltipRootContext();
	const keepMounted = (): boolean => props.keepMounted ?? false;
	const shouldRender = (): boolean => root.mounted() || keepMounted();

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