import React, { forwardRef, useContext } from 'react';
import { FloatingPortal, FloatingFocusManager, FloatingOverlay, useMergeRefs, FloatingArrow, } from '@floating-ui/react';
import { usePopoverNextContext } from '../../hooks/usePopoverNextContext';
import { st, classes } from './Content.st.css.js';
import { APPEND_TO } from '../../PopoverNext.constants';
import { WixDesignSystemContext } from '../../../WixDesignSystemProvider/context';
const Content = forwardRef(function Content({ style, ...props }, propRef) {
    const { dataHook, placement, focusManagerEnabled, context, appendTo, portalRoot, zIndex, popoverStyles, interactions, open, skin, transitionStyles, overlay, style: styleFromUser, showArrow, contentClassName, arrowProps, } = usePopoverNextContext();
    const { contextClassName } = useContext(WixDesignSystemContext);
    const ref = useMergeRefs([context.refs.setFloating, propRef]);
    const { className, ...floatingProps } = interactions.getFloatingProps(props);
    if (!open) {
        return null;
    }
    const mergedStyles = {
        ...popoverStyles,
        zIndex,
        ...transitionStyles,
        ...styleFromUser,
        ...style,
    };
    const content = (React.createElement(FloatingFocusManager, { context: context, disabled: !focusManagerEnabled },
        React.createElement(React.Fragment, null,
            overlay === true ? React.createElement(FloatingOverlay, null) : (overlay ?? null),
            React.createElement("div", { ref: ref, "data-hook": `${dataHook}-content`, "data-zindex": zIndex, className: st(classes.root, { skin, placement, showArrow }, className, contextClassName), style: mergedStyles, ...floatingProps },
                showArrow && (React.createElement(FloatingArrow, { ...arrowProps, className: st(classes.arrow, { skin }) })),
                React.createElement("div", { className: st(classes.contentWrapper, {}, contentClassName) }, props.children)))));
    if (appendTo === APPEND_TO.window || appendTo === APPEND_TO.viewport) {
        return (React.createElement(FloatingPortal, null,
            React.createElement("div", { "data-hook": "popover-portal" }, content)));
    }
    if (portalRoot) {
        return (React.createElement(FloatingPortal, { root: portalRoot, preserveTabOrder: false },
            React.createElement("div", { "data-hook": "popover-portal" }, content)));
    }
    return content;
});
export default Content;
//# sourceMappingURL=Content.js.map