import { clsx } from 'clsx';
import { useRef, useId, useContext } from 'react';
import { CSSTransition } from 'react-transition-group';
import { useIntl } from 'react-intl';
import '../common/theme.mjs';
import '../common/direction.mjs';
import '@transferwise/neptune-tokens';
import '../common/propsValues/control.mjs';
import { Size } from '../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 { Scroll } from '../common/propsValues/scroll.mjs';
import '../common/propsValues/markdownNodeType.mjs';
import '../common/fileType.mjs';
import '@transferwise/formatting';
import { Cross } from '@transferwise/icons';
import closeBtnMessages from '../common/closeButton/CloseButton.messages.mjs';
import { jsx, jsxs } from 'react/jsx-runtime';
import '@transferwise/neptune-validation';
import '../provider/direction/DirectionProvider.mjs';
import { useLayout } from '../common/hooks/useLayout/useLayout.mjs';
import Dimmer from '../dimmer/Dimmer.mjs';
import Drawer from '../drawer/Drawer.mjs';
import { OverlayIdContext } from '../provider/overlay/OverlayIdProvider.mjs';
import Title from '../title/Title.mjs';
import IconButton from '../iconButton/IconButton.mjs';

const TRANSITION_DURATION_IN_MILLISECONDS = 150;
const Modal = ({
  title = null,
  body,
  footer = null,
  onClose,
  onUnmount,
  className,
  open,
  size = Size.MEDIUM,
  scroll = Scroll.VIEWPORT,
  position = Position.CENTER,
  disableDimmerClickToClose = false,
  ...otherProps
}) => {
  const intl = useIntl();
  const {
    isSmall
  } = useLayout();
  const contentReference = useRef(null);
  const titleId = useId();
  const overlayId = useContext(OverlayIdContext);
  return !isSmall ? /*#__PURE__*/jsx(Drawer, {
    open: open,
    className: className,
    headerTitle: title,
    footerContent: footer,
    position: Position.BOTTOM,
    onClose: onClose,
    onUnmount: onUnmount,
    children: body
  }) : /*#__PURE__*/jsx(Dimmer, {
    open: open,
    scrollable: scroll === Scroll.VIEWPORT,
    contentPosition: position,
    disableClickToClose: disableDimmerClickToClose,
    onClose: onClose,
    onExited: onUnmount,
    children: /*#__PURE__*/jsx(CSSTransition, {
      nodeRef: contentReference,
      appear: true,
      in: open,
      classNames: {
        enterDone: 'in'
      },
      timeout: TRANSITION_DURATION_IN_MILLISECONDS,
      unmountOnExit: true,
      children: /*#__PURE__*/jsx("div", {
        ref: contentReference,
        className: clsx('tw-modal', 'd-flex', 'fade', 'outline-none', scroll === Scroll.CONTENT && 'tw-modal--scrollable', className),
        ...otherProps,
        children: /*#__PURE__*/jsx("div", {
          id: overlayId,
          role: "dialog",
          "aria-modal": true,
          "aria-labelledby": titleId,
          className: clsx('tw-modal-dialog', 'd-flex', {
            [`tw-modal-${size}`]: size
          }),
          children: /*#__PURE__*/jsxs("div", {
            className: clsx('tw-modal-content', 'd-flex', 'flex-column', 'justify-content-between'),
            children: [/*#__PURE__*/jsxs("div", {
              className: clsx('tw-modal-header', 'd-flex', 'align-items-center', title ? 'justify-content-between' : 'justify-content-end', 'flex-wrap'),
              children: [title && /*#__PURE__*/jsx(Title, {
                id: titleId,
                type: Typography.TITLE_SUBSECTION,
                className: "tw-modal-title",
                children: title
              }), /*#__PURE__*/jsx(IconButton, {
                size: 40,
                priority: "tertiary",
                "aria-label": intl.formatMessage(closeBtnMessages.ariaLabel),
                onClick: onClose,
                children: /*#__PURE__*/jsx(Cross, {})
              })]
            }), /*#__PURE__*/jsx("div", {
              className: clsx('tw-modal-body', {
                'tw-modal-body--scrollable': scroll === Scroll.CONTENT
              }),
              children: body
            }), footer ? /*#__PURE__*/jsx("div", {
              className: clsx('tw-modal-footer', 'd-flex', 'align-items-center', 'flex-wrap'),
              children: footer
            }) : /*#__PURE__*/jsx("div", {
              className: "m-t-3"
            })]
          })
        })
      })
    })
  });
};

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