'use strict';

var clsx = require('clsx');
var React = require('react');
var reactTransitionGroup = require('react-transition-group');
require('../common/theme.js');
require('../common/direction.js');
require('../common/propsValues/control.js');
require('../common/propsValues/breakpoint.js');
var size = 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');
var scroll = require('../common/propsValues/scroll.js');
require('../common/propsValues/markdownNodeType.js');
require('../common/fileType.js');
var CloseButton = require('../common/closeButton/CloseButton.js');
require('@transferwise/neptune-validation');
require('../provider/direction/DirectionProvider.js');
var useLayout = require('../common/hooks/useLayout/useLayout.js');
var Dimmer = require('../dimmer/Dimmer.js');
var Drawer = require('../drawer/Drawer.js');
var OverlayIdProvider = require('../provider/overlay/OverlayIdProvider.js');
var Title = require('../title/Title.js');
var jsxRuntime = require('react/jsx-runtime');

const TRANSITION_DURATION_IN_MILLISECONDS = 150;
const Modal = ({
  title = null,
  body,
  footer = null,
  onClose,
  onUnmount,
  className,
  open,
  size: size$1 = size.Size.MEDIUM,
  scroll: scroll$1 = scroll.Scroll.VIEWPORT,
  position: position$1 = position.Position.CENTER,
  disableDimmerClickToClose = false,
  ...otherProps
}) => {
  const checkSpecialClasses = classToCheck => className?.split(' ').includes(classToCheck);
  const {
    isMedium
  } = useLayout.useLayout();
  // These should be replaced with props in breaking change.
  const isCompact = checkSpecialClasses('compact');
  const noDivider = checkSpecialClasses('no-divider');
  const contentReference = React.useRef(null);
  const titleId = React.useId();
  const overlayId = React.useContext(OverlayIdProvider.OverlayIdContext);
  return !isMedium ? /*#__PURE__*/jsxRuntime.jsx(Drawer, {
    open: open,
    headerTitle: title,
    footerContent: footer,
    position: position.Position.BOTTOM,
    onClose: onClose,
    onUnmount: onUnmount,
    children: body
  }) : /*#__PURE__*/jsxRuntime.jsx(Dimmer.default, {
    open: open,
    scrollable: scroll$1 === scroll.Scroll.VIEWPORT,
    contentPosition: position$1,
    disableClickToClose: disableDimmerClickToClose,
    onClose: onClose,
    onExited: onUnmount,
    children: /*#__PURE__*/jsxRuntime.jsx(reactTransitionGroup.CSSTransition, {
      nodeRef: contentReference,
      appear: true,
      in: open,
      classNames: {
        enterDone: 'in'
      },
      timeout: TRANSITION_DURATION_IN_MILLISECONDS,
      unmountOnExit: true,
      children: /*#__PURE__*/jsxRuntime.jsx("div", {
        ref: contentReference,
        className: clsx.clsx('tw-modal', 'd-flex', 'fade', 'outline-none', scroll$1 === scroll.Scroll.CONTENT && 'tw-modal--scrollable', className),
        ...otherProps,
        children: /*#__PURE__*/jsxRuntime.jsx("div", {
          id: overlayId,
          role: "dialog",
          "aria-modal": true,
          "aria-labelledby": titleId,
          className: clsx.clsx('tw-modal-dialog', 'd-flex', {
            [`tw-modal-${size$1}`]: size$1
          }),
          children: /*#__PURE__*/jsxRuntime.jsxs("div", {
            className: clsx.clsx('tw-modal-content', 'd-flex', 'flex-column', 'justify-content-between', {
              'tw-modal-compact': isCompact,
              'tw-modal-no-title': !title
            }),
            children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
              className: clsx.clsx('tw-modal-header', 'd-flex', 'align-items-center', 'justify-content-between', 'flex-wrap', {
                'modal--withoutborder': !title || noDivider
              }),
              children: [/*#__PURE__*/jsxRuntime.jsx(Title, {
                id: titleId,
                type: typography.Typography.TITLE_BODY,
                className: "tw-modal-title",
                children: title
              }), /*#__PURE__*/jsxRuntime.jsx(CloseButton.CloseButton, {
                onClick: onClose
              })]
            }), /*#__PURE__*/jsxRuntime.jsx("div", {
              className: clsx.clsx('tw-modal-body', {
                'tw-modal-body--scrollable': scroll$1 === scroll.Scroll.CONTENT
              }),
              children: body
            }), footer && /*#__PURE__*/jsxRuntime.jsx("div", {
              className: clsx.clsx('tw-modal-footer', 'd-flex', 'align-items-center', 'flex-wrap', {
                'modal--withoutborder': noDivider
              }),
              children: footer
            })]
          })
        })
      })
    })
  });
};

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