import { Fragment, jsx, jsxs } from "react/jsx-runtime";
import { ViewportPortal } from "../../xyflow/react.js";
import { cn } from "@uipath/apollo-wind";
import { useMemo } from "react";
import { createPortal } from "react-dom";
import { CanvasPortal } from "./CanvasPortal.js";
import { PanelChrome } from "./PanelChrome.js";
import { useFloatingPosition } from "./useFloatingPosition.js";
const PANEL_BASE_CLASS = 'text-(--canvas-foreground) bg-(--canvas-background-raised) border border-(--canvas-border-de-emp) text-sm flex flex-col transition-opacity duration-200 ease-in-out';
const PANEL_FLOATING_MAX_HEIGHT = 600;
const PANEL_FLOATING_MIN_HEIGHT = 100;
const PANEL_FLOATING_CLASS = 'rounded-lg shadow-[0_4px_16px_rgba(0,0,0,0.12)] w-auto min-w-[280px] max-w-none h-auto max-h-[600px]';
const PANEL_PINNED_CLASS = 'rounded-none shadow-none w-[320px] min-w-[320px] max-w-[320px] h-screen max-h-screen';
function FloatingCanvasPanel({ open = true, nodeId, anchorRect, placement = 'right-start', offset = 20, fallbackPlacement, isPinned = false, useFixedPosition = false, portalToBody = false, title, header, headerActions, children, onClose, scrollKey, scrollableContent = true, onMouseEnter, onMouseLeave }) {
    const { computedAnchor, floatingStyles, availableHeight, refs, mergedReferenceRef } = useFloatingPosition({
        open,
        nodeId,
        anchorRect,
        placement,
        offset,
        fallbackPlacement
    });
    const panelClassName = useMemo(()=>cn(PANEL_BASE_CLASS, isPinned ? PANEL_PINNED_CLASS : PANEL_FLOATING_CLASS), [
        isPinned
    ]);
    const sizingStyle = useMemo(()=>{
        if (isPinned || null == availableHeight) return {};
        const maxHeight = Math.min(PANEL_FLOATING_MAX_HEIGHT, availableHeight);
        const occupiedHeight = Math.max(PANEL_FLOATING_MIN_HEIGHT, maxHeight);
        return {
            maxHeight: `${maxHeight}px`,
            minHeight: `${PANEL_FLOATING_MIN_HEIGHT}px`,
            ['--floating-available-height']: `${occupiedHeight}px`
        };
    }, [
        isPinned,
        availableHeight
    ]);
    if (!open || !computedAnchor) return null;
    if (useFixedPosition && anchorRect) {
        const getScreenSpacePosition = ()=>{
            const anchorCenterX = computedAnchor.x + computedAnchor.width / 2;
            switch(placement){
                case 'top':
                case 'top-start':
                case 'top-end':
                    return {
                        left: anchorCenterX,
                        bottom: window.innerHeight - computedAnchor.y + offset,
                        transform: 'translateX(-50%)'
                    };
                case 'bottom':
                case 'bottom-start':
                case 'bottom-end':
                    return {
                        left: anchorCenterX,
                        top: computedAnchor.y + computedAnchor.height + offset,
                        transform: 'translateX(-50%)'
                    };
                case 'right':
                case 'right-start':
                case 'right-end':
                    return {
                        left: computedAnchor.x + computedAnchor.width + offset,
                        top: computedAnchor.y
                    };
                case 'left':
                case 'left-start':
                case 'left-end':
                    return {
                        right: window.innerWidth - computedAnchor.x + offset,
                        top: computedAnchor.y
                    };
                default:
                    return {
                        left: anchorCenterX,
                        bottom: window.innerHeight - computedAnchor.y + offset,
                        transform: 'translateX(-50%)'
                    };
            }
        };
        const screenPosition = getScreenSpacePosition();
        const fixedContent = /*#__PURE__*/ jsx("div", {
            className: cn('nodrag nopan nowheel', panelClassName),
            onPointerEnter: onMouseEnter,
            onPointerLeave: onMouseLeave,
            style: {
                position: 'fixed',
                ...screenPosition,
                ...sizingStyle,
                zIndex: 1100,
                pointerEvents: 'auto'
            },
            children: /*#__PURE__*/ jsx(PanelChrome, {
                title: title,
                header: header,
                headerActions: headerActions,
                onClose: onClose,
                scrollKey: scrollKey,
                scrollableContent: scrollableContent,
                children: children
            })
        });
        return portalToBody ? /*#__PURE__*/ createPortal(fixedContent, document.body) : /*#__PURE__*/ jsx(CanvasPortal, {
            children: fixedContent
        });
    }
    const panelContent = /*#__PURE__*/ jsx("div", {
        ref: refs.setFloating,
        className: cn('nodrag nopan nowheel', panelClassName),
        onPointerEnter: onMouseEnter,
        onPointerLeave: onMouseLeave,
        style: {
            ...isPinned ? {} : floatingStyles,
            ...sizingStyle,
            position: isPinned ? 'fixed' : 'absolute',
            right: isPinned ? 0 : void 0,
            top: isPinned ? 0 : void 0,
            zIndex: 1100,
            pointerEvents: 'auto'
        },
        children: /*#__PURE__*/ jsx(PanelChrome, {
            title: title,
            header: header,
            headerActions: headerActions,
            onClose: onClose,
            scrollKey: scrollKey,
            scrollableContent: scrollableContent,
            children: children
        })
    });
    return /*#__PURE__*/ jsxs(Fragment, {
        children: [
            /*#__PURE__*/ jsx(ViewportPortal, {
                children: /*#__PURE__*/ jsx("div", {
                    ref: mergedReferenceRef,
                    style: {
                        position: 'absolute',
                        width: computedAnchor.width,
                        height: computedAnchor.height,
                        transform: `translate(${computedAnchor.x}px, ${computedAnchor.y}px)`,
                        pointerEvents: 'none',
                        background: 'none'
                    }
                })
            }),
            portalToBody ? /*#__PURE__*/ createPortal(panelContent, document.body) : /*#__PURE__*/ jsx(CanvasPortal, {
                children: panelContent
            })
        ]
    });
}
export { FloatingCanvasPanel };
