import { QuestionMarkCircle } from '@transferwise/icons';
import { clsx } from 'clsx';
import { useState } from 'react';
import { useIntl } from 'react-intl';
import '../common/theme.mjs';
import '../common/direction.mjs';
import '../common/propsValues/control.mjs';
import '../common/propsValues/breakpoint.mjs';
import { Size } from '../common/propsValues/size.mjs';
import '../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 '../common/closeButton/CloseButton.messages.mjs';
import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
import Modal from '../modal/Modal.mjs';
import Popover from '../popover/Popover.mjs';
import messages from './Info.messages.mjs';
import { InfoPresentation } from './infoPresentations.mjs';

const Info = ({
  className = undefined,
  content = undefined,
  onClick = undefined,
  presentation = InfoPresentation.POPOVER,
  size = Size.SMALL,
  title = undefined,
  'aria-label': ariaLabel,
  preferredPlacement = Position.BOTTOM
}) => {
  const intl = useIntl();
  const [open, setOpen] = useState(false);
  ariaLabel ??= intl.formatMessage(messages.ariaLabel);
  const isModal = presentation === InfoPresentation.MODAL;
  const isSmall = size === Size.SMALL;
  const buttonProps = {
    'aria-label': ariaLabel,
    className: 'btn-unstyled',
    children: /*#__PURE__*/jsx(QuestionMarkCircle, {
      size: isSmall ? 16 : 24
    })
  };
  return /*#__PURE__*/jsx("span", {
    className: clsx(className, 'np-info', {
      'np-info__small': isSmall,
      'np-info__large': !isSmall
    }),
    children: isModal ? /*#__PURE__*/jsxs(Fragment, {
      children: [/*#__PURE__*/jsx("button", {
        type: "button",
        onClick: () => {
          setOpen(!open);
          if (onClick) {
            onClick();
          }
        },
        ...buttonProps
      }), /*#__PURE__*/jsx(Modal, {
        body: content,
        open: open,
        title: title,
        onClose: () => setOpen(false)
      })]
    }) : /*#__PURE__*/jsx(Popover, {
      content: content,
      preferredPlacement: preferredPlacement,
      title: title,
      children: /*#__PURE__*/jsx("button", {
        type: "button",
        ...buttonProps,
        onClick: () => {
          if (onClick) {
            onClick();
          }
        }
      })
    })
  });
};

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