<script lang="ts">
	import { mergeProps } from "svelte-toolbelt";
	import ScrollLock from "../scroll-lock/scroll-lock.svelte";
	import type { PopperLayerImplProps } from "./types.js";
	import PopperContent from "./popper-content.svelte";
	import EscapeLayer from "../escape-layer/escape-layer.svelte";
	import DismissibleLayer from "../dismissible-layer/dismissible-layer.svelte";
	import TextSelectionLayer from "../text-selection-layer/text-selection-layer.svelte";
	import FocusScope from "../focus-scope/focus-scope.svelte";

	let {
		popper,
		onEscapeKeydown,
		escapeKeydownBehavior,
		preventOverflowTextSelection,
		id,
		onPointerDown,
		onPointerUp,
		side,
		sideOffset,
		align,
		alignOffset,
		arrowPadding,
		avoidCollisions,
		collisionBoundary,
		collisionPadding,
		sticky,
		hideWhenDetached,
		updatePositionStrategy,
		strategy,
		dir,
		preventScroll,
		wrapperId,
		style,
		onPlaced,
		onInteractOutside,
		onCloseAutoFocus,
		onOpenAutoFocus,
		onFocusOutside,
		interactOutsideBehavior = "close",
		loop,
		trapFocus = true,
		isValidEvent = () => false,
		customAnchor = null,
		isStatic = false,
		enabled,
		ref,
		tooltip = false,
		contentPointerEvents = "auto",
		...restProps
	}: Omit<PopperLayerImplProps, "open" | "children" | "shouldRender"> & {
		enabled: boolean;
		contentPointerEvents?: "auto" | "none";
	} = $props();
</script>

<PopperContent
	{isStatic}
	{id}
	{side}
	{sideOffset}
	{align}
	{alignOffset}
	{arrowPadding}
	{avoidCollisions}
	{collisionBoundary}
	{collisionPadding}
	{sticky}
	{hideWhenDetached}
	{updatePositionStrategy}
	{strategy}
	{dir}
	{wrapperId}
	{style}
	{onPlaced}
	{customAnchor}
	{enabled}
	{tooltip}
>
	{#snippet content({ props: floatingProps, wrapperProps })}
		{#if restProps.forceMount && enabled}
			<ScrollLock {preventScroll} />
		{:else if !restProps.forceMount}
			<ScrollLock {preventScroll} />
		{/if}
		<FocusScope
			{onOpenAutoFocus}
			{onCloseAutoFocus}
			{loop}
			{enabled}
			{trapFocus}
			forceMount={restProps.forceMount}
			{ref}
		>
			{#snippet focusScope({ props: focusScopeProps })}
				<EscapeLayer {onEscapeKeydown} {escapeKeydownBehavior} {enabled} {ref}>
					<DismissibleLayer
						{id}
						{onInteractOutside}
						{onFocusOutside}
						{interactOutsideBehavior}
						{isValidEvent}
						{enabled}
						{ref}
					>
						{#snippet children({ props: dismissibleProps })}
							<TextSelectionLayer
								{id}
								{preventOverflowTextSelection}
								{onPointerDown}
								{onPointerUp}
								{enabled}
								{ref}
							>
								{@render popper?.({
									props: mergeProps(
										restProps,
										floatingProps,
										dismissibleProps,
										focusScopeProps,
										{
											style: {
												pointerEvents: contentPointerEvents,
											},
										}
									),
									wrapperProps,
								})}
							</TextSelectionLayer>
						{/snippet}
					</DismissibleLayer>
				</EscapeLayer>
			{/snippet}
		</FocusScope>
	{/snippet}
</PopperContent>
