import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
// (C) 2025-2026 GoodData Corporation
import { useMemo, useRef } from "react";
import { Portal } from "react-portal";
import { bem } from "../@utils/bem.js";
import { makeDialogKeyboardNavigation } from "../@utils/keyboardNavigation.js";
import { OverlayContent, OverlayProvider } from "../@utils/OverlayStack.js";
import { useElementSize } from "../hooks/useElementSize.js";
import { UiAutofocus } from "../UiFocusManager/UiAutofocus.js";
import { UiFocusTrap } from "../UiFocusManager/UiFocusTrap.js";
import { UiReturnFocusOnUnmount } from "../UiFocusManager/UiReturnFocusOnUnmount.js";
import { UiIconButton } from "../UiIconButton/UiIconButton.js";
import { useToggleDrawer } from "./hooks/useToggleDrawer.js";
const { b, e } = bem("gd-ui-kit-drawer");
/**
 * @internal
 */
export function UiDrawer({ open, zIndex, node, mode = "absolute", dataTestId, children, anchor = "right", transition, onEscapeKey, onClickOutside, closeLabel = "Close", showCloseButton = true, closeButtonSize, showBackdrop = true, header, onClickClose, refocusKey, initialFocus, returnFocusTo, accessibilityConfig, }) {
    const ref = useRef(null);
    const { isOpen, isFullyOpen, view, backdropStyle, contentStyle } = useToggleDrawer(open ?? false, transition ?? {}, showBackdrop);
    const handleKeyDown = useMemo(() => makeDialogKeyboardNavigation({
        onClose: onEscapeKey,
    }, {
        shouldPreventDefault: true,
        shouldStopPropagation: true,
    }), [onEscapeKey]);
    const { ref: headerRef, height } = useElementSize([isOpen, ref.current]);
    if (!isOpen) {
        return null;
    }
    return (_jsx(OverlayProvider, { zIndex: zIndex, children: _jsx(OverlayContent, { children: ({ zIndex }) => (_jsx(Portal, { node: node ?? document.body, children: _jsx(UiReturnFocusOnUnmount, { returnFocusTo: returnFocusTo, children: _jsxs("div", { className: b({ anchor, view }), "data-testid": dataTestId, style: { zIndex }, children: [
                            _jsx("div", { className: e("backdrop"), style: {
                                    position: mode,
                                    ...backdropStyle,
                                }, onClick: onClickOutside }), _jsx(UiFocusTrap, { root: _jsx("div", {}), children: _jsxs("div", { tabIndex: -1, style: {
                                        position: mode,
                                        ...contentStyle,
                                        ...(height ? { paddingTop: height } : {}),
                                    }, onKeyDown: handleKeyDown, role: accessibilityConfig?.role ?? "dialog", "aria-label": accessibilityConfig?.ariaLabel, "aria-labelledby": accessibilityConfig?.ariaLabelledBy, "aria-describedby": accessibilityConfig?.ariaDescribedBy, "aria-modal": "true", className: e("content", {
                                        showCloseButton: showCloseButton || Boolean(header),
                                    }), ref: showCloseButton ? undefined : ref, children: [
                                        _jsxs("div", { className: e("header"), ref: headerRef, children: [header, showCloseButton ? (_jsx("div", { className: e("close-button"), children: _jsx(UiIconButton, { label: closeLabel, icon: "close", variant: "tertiary", size: closeButtonSize, onClick: onClickClose, ref: ref }) })) : null] }), _jsx(UiAutofocus, { root: _jsx("div", { className: e("scrollable") }), active: isFullyOpen, refocusKey: refocusKey, initialFocus: initialFocus || ref, children: children })
                                    ] }) })
                        ] }) }) })) }) }));
}
