"use client";
import { jsx as _jsx } from "react/jsx-runtime";
import * as React from "react";
import * as PopoverPrimitive from "@radix-ui/react-popover";
import { cn } from "../../lib/utils";
// Custom hook to handle iframe and document interactions for closing popovers
function useIframeClickDetection(isOpen, onShouldClose) {
    React.useEffect(() => {
        if (!isOpen)
            return;
        const handleDocumentInteraction = () => {
            onShouldClose();
        };
        const handleIframeInteraction = (event) => {
            // Delay to ensure this happens after popover state updates
            setTimeout(onShouldClose, 50);
        };
        // Listen for iframe focus events which indicate user clicked in iframe
        // Only target iframes with the class "page-iframe"
        const iframes = document.querySelectorAll("iframe.page-iframe");
        iframes.forEach((iframe) => {
            // Use capture phase to catch events before they're handled
            const iframeElement = iframe;
            iframe.addEventListener("mousedown", handleIframeInteraction, true);
            iframeElement.contentWindow?.addEventListener("focus", handleIframeInteraction, true);
        });
        // Also listen for window blur which can indicate focus moved to iframe
        window.addEventListener("blur", handleDocumentInteraction);
        return () => {
            window.removeEventListener("blur", handleDocumentInteraction);
            iframes.forEach((iframe) => {
                const iframeElement = iframe;
                iframe.removeEventListener("mousedown", handleIframeInteraction, true);
                iframeElement.contentWindow?.removeEventListener("focus", handleIframeInteraction, true);
            });
        };
    }, [isOpen, onShouldClose]);
}
const PopoverRoot = PopoverPrimitive.Root;
const PopoverTrigger = PopoverPrimitive.Trigger;
// Enhanced Popover component with iframe click detection
const Popover = ({ enableIframeClickDetection = true, ...props }) => {
    const [internalOpen, setInternalOpen] = React.useState(false);
    const isControlled = props.open !== undefined;
    const isOpen = isControlled ? props.open : internalOpen;
    const handleOpenChange = React.useCallback((open) => {
        if (isControlled) {
            props.onOpenChange?.(open);
        }
        else {
            setInternalOpen(open);
        }
    }, [isControlled, props.onOpenChange]);
    // Use iframe click detection if enabled
    useIframeClickDetection(Boolean(enableIframeClickDetection && isOpen), () => handleOpenChange(false));
    return (_jsx(PopoverRoot, { ...props, open: isOpen, onOpenChange: handleOpenChange }));
};
Popover.displayName = "Popover";
const PopoverContent = React.forwardRef(({ className, align = "center", sideOffset = 4, container, ...props }, ref) => (_jsx(PopoverPrimitive.Portal, { container: container, children: _jsx(PopoverPrimitive.Content, { ref: ref, align: align, sideOffset: sideOffset, "data-slot": "popover-content", className: cn("bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-[250] w-72 rounded-md border p-4 shadow-md outline-none", className), ...props }) })));
PopoverContent.displayName = PopoverPrimitive.Content.displayName;
function PopoverAnchor({ ...props }) {
    return _jsx(PopoverPrimitive.Anchor, { "data-slot": "popover-anchor", ...props });
}
export { Popover, PopoverTrigger, PopoverContent, PopoverAnchor };
//# sourceMappingURL=popover.js.map