import { clsx } from 'clsx';
import { useId, useEffect, useRef, useState, cloneElement, isValidElement } from 'react';
import '../common/theme.mjs';
import '../common/direction.mjs';
import '../common/propsValues/control.mjs';
import '../common/propsValues/breakpoint.mjs';
import '../common/propsValues/size.mjs';
import { Typography } from '../common/propsValues/typography.mjs';
import '../common/propsValues/width.mjs';
import '../common/propsValues/type.mjs';
import '../common/propsValues/dateMode.mjs';
import '../common/propsValues/monthFormat.mjs';
import { Position } from '../common/propsValues/position.mjs';
import '../common/propsValues/layouts.mjs';
import '../common/propsValues/status.mjs';
import '../common/propsValues/sentiment.mjs';
import '../common/propsValues/profileType.mjs';
import '../common/propsValues/variant.mjs';
import '../common/propsValues/scroll.mjs';
import '../common/propsValues/markdownNodeType.mjs';
import '../common/fileType.mjs';
import '@transferwise/icons';
import 'react-intl';
import '../common/closeButton/CloseButton.messages.mjs';
import { jsxs, jsx } from 'react/jsx-runtime';
import ResponsivePanel from '../common/responsivePanel/ResponsivePanel.mjs';
import Title from '../title/Title.mjs';
import { logActionRequired } from '../utilities/logActionRequired.mjs';

function resolvePlacement(preferredPlacement) {
  switch (preferredPlacement) {
    case 'left-top':
    case 'right-top':
      return 'top';
    case 'bottom-left':
    case 'bottom-right':
      return 'bottom';
    default:
      return preferredPlacement;
  }
}
function Popover({
  children,
  className,
  content,
  preferredPlacement = Position.RIGHT,
  title,
  onClose,
  'aria-label': ariaLabel
}) {
  const titleId = useId();
  const resolvedPlacement = resolvePlacement(preferredPlacement);
  useEffect(() => {
    if (resolvedPlacement !== preferredPlacement) {
      logActionRequired(`Popover has deprecated ${preferredPlacement} value for the 'preferredPlacement' prop. Please use ${resolvedPlacement} instead.`);
    }
  }, [preferredPlacement, resolvedPlacement]);
  const anchorReference = useRef(null);
  const [open, setOpen] = useState(false);
  const handleOnClose = () => {
    setOpen(false);
    onClose?.();
  };
  return /*#__PURE__*/jsxs("span", {
    className: clsx('np-popover', className),
    children: [/*#__PURE__*/jsx("span", {
      ref: anchorReference,
      className: "d-inline-block",
      children: /*#__PURE__*/isValidElement(children) ? /*#__PURE__*/cloneElement(children, {
        onClick: () => {
          children.props.onClick?.();
          setOpen(prevOpen => !prevOpen);
        }
      }) : children
    }), /*#__PURE__*/jsx(ResponsivePanel, {
      "aria-label": ariaLabel,
      "aria-labelledby": title && !ariaLabel ? titleId : undefined,
      open: open,
      anchorRef: anchorReference,
      position: resolvedPlacement,
      arrow: true,
      className: "np-popover__container",
      onClose: handleOnClose,
      children: /*#__PURE__*/jsxs("div", {
        className: "np-popover__content np-text-default-body",
        children: [title && /*#__PURE__*/jsx(Title, {
          type: Typography.TITLE_BODY,
          id: titleId,
          className: "m-b-1",
          children: title
        }), content]
      })
    })]
  });
}

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