"use client";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import * as React from "react";
import * as DialogPrimitive from "@radix-ui/react-dialog";
import { VisuallyHidden } from "@radix-ui/react-visually-hidden";
import { cn } from "../../lib/utils";
import { useAppPortalContainer } from "./portal-container-context";
import { CloseButton } from "./close-button";
const CONTAINER_RELATIVE_DIALOG_STYLE_KEYS = [
    "width",
    "height",
    "maxWidth",
    "maxHeight",
    "minWidth",
    "minHeight",
];
function normalizeViewportSizedDimension(value) {
    if (typeof value !== "string") {
        return value;
    }
    const trimmed = value.trim();
    const match = trimmed.match(/^(-?\d*\.?\d+)(d?vw|d?vh)$/i);
    if (!match) {
        return value;
    }
    return `${match[1]}%`;
}
function normalizeContainerRelativeDialogStyle(style, useContainerRelativeSizing) {
    if (!style || !useContainerRelativeSizing) {
        return style;
    }
    const normalizedStyle = { ...style };
    for (const key of CONTAINER_RELATIVE_DIALOG_STYLE_KEYS) {
        normalizedStyle[key] = normalizeViewportSizedDimension(style[key]);
    }
    return normalizedStyle;
}
function Dialog({ ...props }) {
    return _jsx(DialogPrimitive.Root, { "data-slot": "dialog", ...props });
}
function DialogTrigger({ ...props }) {
    return _jsx(DialogPrimitive.Trigger, { "data-slot": "dialog-trigger", ...props });
}
function DialogPortal({ container, ...props }) {
    const appContainer = useAppPortalContainer();
    return (_jsx(DialogPrimitive.Portal, { "data-slot": "dialog-portal", container: container ?? appContainer, ...props }));
}
function DialogClose({ ...props }) {
    return _jsx(DialogPrimitive.Close, { "data-slot": "dialog-close", ...props });
}
function DialogOverlay({ className, ...props }) {
    return (_jsx(DialogPrimitive.Overlay, { "data-slot": "dialog-overlay", className: cn("data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 bg-neutral-grey-100/50 absolute inset-0 z-[100] backdrop-blur-sm", className), ...props }));
}
function containsDialogDescription(children) {
    return React.Children.toArray(children).some((child) => {
        if (!React.isValidElement(child)) {
            return false;
        }
        if (child.type === DialogDescription ||
            child.type === DialogPrimitive.Description) {
            return true;
        }
        return containsDialogDescription(child.props.children);
    });
}
function isHelpPanelTarget(target) {
    if (target instanceof Element) {
        return !!target.closest('[data-help-panel="true"]');
    }
    if (target instanceof Node) {
        return !!target.parentElement?.closest('[data-help-panel="true"]');
    }
    return false;
}
function DialogContent({ className, children, showCloseButton = true, overlayClassName, onInteractOutside, onPointerDownOutside, onFocusOutside, style, ...props }) {
    const appContainer = useAppPortalContainer();
    const hasDialogDescription = React.useMemo(() => containsDialogDescription(children), [children]);
    const normalizedStyle = React.useMemo(() => normalizeContainerRelativeDialogStyle(style, Boolean(appContainer)), [style, appContainer]);
    const handleInteractOutside = React.useCallback((event) => {
        const originalTarget = event.detail?.originalEvent?.target;
        const target = originalTarget ?? event.target;
        if (isHelpPanelTarget(target)) {
            event.preventDefault();
            return;
        }
        const tourActive = document.body.getAttribute("data-tour-active") === "true";
        if (tourActive) {
            event.preventDefault();
            return;
        }
        if (onInteractOutside) {
            onInteractOutside(event);
        }
    }, [onInteractOutside]);
    const handlePointerDownOutside = React.useCallback((event) => {
        const originalTarget = event.detail?.originalEvent?.target;
        const target = originalTarget ?? event.target;
        if (isHelpPanelTarget(target)) {
            event.preventDefault();
            return;
        }
        onPointerDownOutside?.(event);
    }, [onPointerDownOutside]);
    const handleFocusOutside = React.useCallback((event) => {
        const originalTarget = event.detail?.originalEvent?.target;
        const target = originalTarget ?? event.target;
        if (isHelpPanelTarget(target)) {
            event.preventDefault();
            return;
        }
        onFocusOutside?.(event);
    }, [onFocusOutside]);
    return (_jsxs(DialogPortal, { "data-slot": "dialog-portal", children: [_jsx(DialogOverlay, { className: overlayClassName }), _jsxs(DialogPrimitive.Content, { "data-slot": "dialog-content", "data-testid": "dialog-content", ...props, ...(!hasDialogDescription && props["aria-describedby"] === undefined
                    ? { "aria-describedby": undefined }
                    : {}), className: cn("bg-background 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 absolute top-[50%] left-[50%] z-101 flex max-h-[calc(100%-2rem)] w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] flex-col overflow-hidden rounded-2xl border shadow-2xl duration-200", className), style: normalizedStyle, onInteractOutside: handleInteractOutside, onPointerDownOutside: handlePointerDownOutside, onFocusOutside: handleFocusOutside, children: [children, _jsx(VisuallyHidden, { children: _jsx(DialogPrimitive.Title, { children: "Dialog" }) }), showCloseButton && (_jsx(DialogPrimitive.Close, { asChild: true, children: _jsx(CloseButton, { "data-slot": "dialog-close", "data-testid": "dialog-close", className: "absolute top-4 right-4 z-50", label: "Close", showTooltip: false }) }))] })] }));
}
function DialogHeader({ className, ...props }) {
    return (_jsx("div", { "data-slot": "dialog-header", className: cn("flex flex-col gap-2 px-8 pt-8 text-left", className), ...props }));
}
function DialogFooter({ className, ...props }) {
    return (_jsx("div", { "data-slot": "dialog-footer", className: cn("flex flex-col-reverse gap-3 px-8 pb-8 sm:flex-row sm:justify-end", className), ...props }));
}
function DialogTitle({ className, ...props }) {
    return (_jsx(DialogPrimitive.Title, { "data-slot": "dialog-title", className: cn("text-xl leading-none font-bold tracking-tight", className), ...props }));
}
function DialogDescription({ className, ...props }) {
    return (_jsx(DialogPrimitive.Description, { "data-slot": "dialog-description", className: cn("text-muted-foreground text-sm", className), ...props }));
}
export { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, };
//# sourceMappingURL=dialog.js.map