'use client';


import { Detail, PopoverStatic, PopoverXAlign, PopoverYAlign } from "./static.mjs";
import { useEffect, useRef, useState } from "react";
import { jsx } from "react/jsx-runtime";

//#region src/components/Popover/dynamic.tsx
/**
* Popover Component (Client-side)
*
* Client-side wrapper around the static Popover component.
* Reuses the server-side compatible implementation.
*
* @param props - Popover component props
* @returns Trigger container with popover functionality
*/
const PopoverComponent = (props) => {
	return /* @__PURE__ */ jsx(PopoverStatic, { ...props });
};
/**
* Popover Detail Component (Client-side)
*
* Client-side wrapper around the static Detail component that adds automatic
* positioning logic based on viewport constraints.
*
* Features:
* - Reuses server-side compatible static Detail component
* - Adds automatic positioning adjustment based on viewport
* - Calculates optimal X/Y alignment to prevent overflow
* - Dynamically adjusts max-width based on available space
* - Listens to window resize and scroll events
*
* @param props - Popover Detail component props
* @returns Positioned popover content with animations and accessibility
*/
const Detail$1 = ({ xAlign = PopoverXAlign.START, yAlign = PopoverYAlign.BELOW, ...props }) => {
	const popoverRef = useRef(null);
	const [computedXAlign, setComputedXAlign] = useState(xAlign);
	const [computedYAlign, setComputedYAlign] = useState(yAlign);
	const [maxWidth, setMaxWidth] = useState(void 0);
	useEffect(() => {
		const adjustPosition = () => {
			if (!popoverRef.current) return;
			const popoverElement = popoverRef.current;
			const triggerElement$1 = document.getElementById(`unrollable-panel-button-${props.identifier}`);
			if (!triggerElement$1) return;
			const triggerRect = triggerElement$1.getBoundingClientRect();
			const viewportWidth = window.innerWidth;
			const viewportHeight = window.innerHeight;
			const gap = 16;
			const padding = 16;
			const maxWidthFromLeft = viewportWidth - triggerRect.left - padding;
			const maxWidthFromRight = triggerRect.right - padding;
			setMaxWidth(Math.max(maxWidthFromLeft, maxWidthFromRight));
			const wasInvisible = popoverElement.classList.contains("invisible");
			if (wasInvisible) {
				popoverElement.style.visibility = "hidden";
				popoverElement.classList.remove("invisible");
			}
			requestAnimationFrame(() => {
				const popoverRect = popoverElement.getBoundingClientRect();
				if (wasInvisible) {
					popoverElement.style.visibility = "";
					popoverElement.classList.add("invisible");
				}
				let newYAlign = yAlign;
				const spaceBelow = viewportHeight - triggerRect.bottom - gap;
				const spaceAbove = triggerRect.top - gap;
				if (yAlign === PopoverYAlign.BELOW && spaceBelow < popoverRect.height) {
					if (spaceAbove >= popoverRect.height) newYAlign = PopoverYAlign.ABOVE;
				} else if (yAlign === PopoverYAlign.ABOVE && spaceAbove < popoverRect.height) {
					if (spaceBelow >= popoverRect.height) newYAlign = PopoverYAlign.BELOW;
				}
				let newXAlign = xAlign;
				const spaceRight = viewportWidth - triggerRect.left - padding;
				const spaceLeft = triggerRect.right - padding;
				if (xAlign === PopoverXAlign.START && spaceRight < popoverRect.width) {
					if (spaceLeft >= popoverRect.width) newXAlign = PopoverXAlign.END;
				} else if (xAlign === PopoverXAlign.END && spaceLeft < popoverRect.width) {
					if (spaceRight >= popoverRect.width) newXAlign = PopoverXAlign.START;
				}
				setComputedYAlign(newYAlign);
				setComputedXAlign(newXAlign);
			});
		};
		const timeoutId = setTimeout(adjustPosition, 0);
		const triggerElement = document.getElementById(`unrollable-panel-button-${props.identifier}`);
		if (triggerElement) {
			triggerElement.addEventListener("mouseenter", adjustPosition);
			triggerElement.addEventListener("focusin", adjustPosition);
		}
		const resizeObserver = new ResizeObserver(() => {
			adjustPosition();
		});
		if (popoverRef.current) resizeObserver.observe(popoverRef.current);
		window.addEventListener("resize", adjustPosition);
		window.addEventListener("scroll", adjustPosition, true);
		return () => {
			clearTimeout(timeoutId);
			if (triggerElement) {
				triggerElement.removeEventListener("mouseenter", adjustPosition);
				triggerElement.removeEventListener("focusin", adjustPosition);
			}
			resizeObserver.disconnect();
			window.removeEventListener("resize", adjustPosition);
			window.removeEventListener("scroll", adjustPosition, true);
		};
	}, [
		props.identifier,
		xAlign,
		yAlign
	]);
	return /* @__PURE__ */ jsx(Detail, {
		...props,
		xAlign: computedXAlign,
		yAlign: computedYAlign,
		ref: popoverRef,
		style: {
			...props.style,
			maxWidth: maxWidth ? `${maxWidth}px` : void 0
		}
	});
};
const Popover = PopoverComponent;
Popover.Detail = Detail$1;

//#endregion
export { Popover };
//# sourceMappingURL=dynamic.mjs.map