'use strict';

var clsx = require('clsx');
var React = require('react');
require('../common/theme.js');
require('../common/direction.js');
require('../common/propsValues/control.js');
require('../common/propsValues/breakpoint.js');
require('../common/propsValues/size.js');
var typography = require('../common/propsValues/typography.js');
require('../common/propsValues/width.js');
require('../common/propsValues/type.js');
require('../common/propsValues/dateMode.js');
require('../common/propsValues/monthFormat.js');
var position = require('../common/propsValues/position.js');
require('../common/propsValues/layouts.js');
require('../common/propsValues/status.js');
require('../common/propsValues/sentiment.js');
require('../common/propsValues/profileType.js');
require('../common/propsValues/variant.js');
require('../common/propsValues/scroll.js');
require('../common/propsValues/markdownNodeType.js');
require('../common/fileType.js');
require('@transferwise/icons');
require('react-intl');
require('../common/closeButton/CloseButton.messages.js');
var jsxRuntime = require('react/jsx-runtime');
var ResponsivePanel = require('../common/responsivePanel/ResponsivePanel.js');
var Title = require('../title/Title.js');
var logActionRequired = require('../utilities/logActionRequired.js');

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.Position.RIGHT,
  title,
  onClose,
  'aria-label': ariaLabel
}) {
  const titleId = React.useId();
  const resolvedPlacement = resolvePlacement(preferredPlacement);
  React.useEffect(() => {
    if (resolvedPlacement !== preferredPlacement) {
      logActionRequired.logActionRequired(`Popover has deprecated ${preferredPlacement} value for the 'preferredPlacement' prop. Please use ${resolvedPlacement} instead.`);
    }
  }, [preferredPlacement, resolvedPlacement]);
  const anchorReference = React.useRef(null);
  const [open, setOpen] = React.useState(false);
  const handleOnClose = () => {
    setOpen(false);
    onClose?.();
  };
  return /*#__PURE__*/jsxRuntime.jsxs("span", {
    className: clsx.clsx('np-popover', className),
    children: [/*#__PURE__*/jsxRuntime.jsx("span", {
      ref: anchorReference,
      className: "d-inline-block",
      children: /*#__PURE__*/React.isValidElement(children) ? /*#__PURE__*/React.cloneElement(children, {
        onClick: () => {
          children.props.onClick?.();
          setOpen(prevOpen => !prevOpen);
        }
      }) : children
    }), /*#__PURE__*/jsxRuntime.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__*/jsxRuntime.jsxs("div", {
        className: "np-popover__content np-text-default-body",
        children: [title && /*#__PURE__*/jsxRuntime.jsx(Title, {
          type: typography.Typography.TITLE_BODY,
          id: titleId,
          className: "m-b-1",
          children: title
        }), content]
      })
    })]
  });
}

module.exports = Popover;
//# sourceMappingURL=Popover.js.map
