import { offset, flip, shift, arrow, size, useFloating, autoUpdate } from '@floating-ui/react';
import { clsx } from 'clsx';
import { forwardRef, useRef, useContext } from 'react';
import '../theme.mjs';
import '../direction.mjs';
import '@transferwise/neptune-tokens';
import '../propsValues/control.mjs';
import '../propsValues/size.mjs';
import '../propsValues/typography.mjs';
import '../propsValues/width.mjs';
import '../propsValues/type.mjs';
import '../propsValues/dateMode.mjs';
import '../propsValues/monthFormat.mjs';
import { Position } from '../propsValues/position.mjs';
import '../propsValues/layouts.mjs';
import '../propsValues/status.mjs';
import '../propsValues/sentiment.mjs';
import '../propsValues/profileType.mjs';
import '../propsValues/variant.mjs';
import '../propsValues/scroll.mjs';
import '../propsValues/markdownNodeType.mjs';
import '../fileType.mjs';
import '@transferwise/formatting';
import '@transferwise/icons';
import 'react-intl';
import '../closeButton/CloseButton.messages.mjs';
import { jsx, jsxs } from 'react/jsx-runtime';
import Dimmer from '../../dimmer/Dimmer.mjs';
import { OverlayIdContext } from '../../provider/overlay/OverlayIdProvider.mjs';

const POPOVER_OFFSET = 16;
// By default the flip positioning explores only the opposite alternative. So if left is passed and there's no enough space
// the right one gets chosen. If there's no space on both sides popover goes back to the initially chosen one left.
// This mapping forces popover to try the four available positions before going back to the initial chosen one.
const fallbackPlacements = {
  [Position.TOP]: [Position.BOTTOM, Position.RIGHT, Position.LEFT],
  [Position.BOTTOM]: [Position.TOP, Position.RIGHT, Position.LEFT],
  [Position.LEFT]: [Position.RIGHT, Position.TOP, Position.BOTTOM],
  [Position.RIGHT]: [Position.LEFT, Position.TOP, Position.BOTTOM]
};
const Panel = /*#__PURE__*/forwardRef(function Panel({
  arrow: arrow$1 = false,
  flip: flip$1 = true,
  altAxis = false,
  children,
  open = false,
  onClose,
  position = Position.BOTTOM,
  anchorRef,
  anchorWidth = false,
  considerHeight = false,
  ...rest
}, reference) {
  const arrowRef = useRef(null);
  const middleware = [];
  if (arrow$1) {
    middleware.push(offset(POPOVER_OFFSET));
  }
  if (flip$1 && fallbackPlacements[position]) {
    middleware.push(flip({
      fallbackPlacements: fallbackPlacements[position]
    }));
  }
  if (altAxis) {
    middleware.push(shift());
  }
  if (arrow$1) {
    middleware.push(arrow({
      element: arrowRef,
      padding: 8
    }));
  }
  if (considerHeight) {
    middleware.push(size({
      padding: POPOVER_OFFSET,
      apply: ({
        elements,
        availableHeight
      }) => {
        elements.floating.style.setProperty('--np-panel-available-height', `${availableHeight}px`);
      }
    }));
  }
  const {
    refs,
    floatingStyles,
    placement,
    middlewareData
  } = useFloating({
    placement: position,
    middleware,
    elements: {
      reference: anchorRef.current
    },
    whileElementsMounted: open ? autoUpdate : undefined
  });
  const arrowStyle = {
    ...(middlewareData.arrow?.x != null ? {
      left: middlewareData.arrow.x
    } : {}),
    ...(middlewareData.arrow?.y != null ? {
      top: middlewareData.arrow.y
    } : {})
  };
  const contentStyle = {
    ...(anchorWidth ? {
      width: anchorRef.current?.clientWidth
    } : undefined)
  };
  const overlayId = useContext(OverlayIdContext);
  return /*#__PURE__*/jsx(Dimmer, {
    open: open,
    transparent: true,
    fadeContentOnEnter: true,
    fadeContentOnExit: true,
    onClose: onClose,
    children: /*#__PURE__*/jsx("div", {
      id: overlayId,
      ...rest,
      ref: refs.setFloating,
      role: "dialog",
      style: floatingStyles,
      "data-popper-placement": placement,
      className: clsx('np-panel', {
        'np-panel--open': open
      }, rest.className),
      children: /*#__PURE__*/jsxs("div", {
        ref: reference,
        style: contentStyle,
        className: clsx('np-panel__content'),
        children: [children, arrow$1 && /*#__PURE__*/jsx("div", {
          ref: arrowRef,
          className: clsx('np-panel__arrow'),
          style: arrowStyle
        })]
      })
    })
  });
});

export { Panel as default };
//# sourceMappingURL=Panel.mjs.map
