import { clsx } from 'clsx';
import { useRef, useId, useContext } from 'react';
import { CSSTransition } from 'react-transition-group';
import { CloseButton } from '../common/closeButton/CloseButton.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 { jsx, jsxs } from 'react/jsx-runtime';
import { useLayout } from '../common/hooks/useLayout/useLayout.mjs';
import { Scroll } from '../common/propsValues/scroll.mjs';
import { Position } from '../common/propsValues/position.mjs';
import { Typography } from '../common/propsValues/typography.mjs';
import { Size } from '../common/propsValues/size.mjs';

const TRANSITION_DURATION_IN_MILLISECONDS = 150;
const Modal = ({
  title = null,
  body,
  footer = null,
  onClose,
  className,
  open,
  size = Size.MEDIUM,
  scroll = Scroll.VIEWPORT,
  position = Position.CENTER,
  disableDimmerClickToClose = false,
  ...otherProps
}) => {
  const checkSpecialClasses = classToCheck => className?.split(' ').includes(classToCheck);
  const {
    isMedium
  } = useLayout();
  // These should be replaced with props in breaking change.
  const isCompact = checkSpecialClasses('compact');
  const noDivider = checkSpecialClasses('no-divider');
  const contentReference = useRef(null);
  const titleId = useId();
  const overlayId = useContext(OverlayIdContext);
  return !isMedium ? /*#__PURE__*/jsx(Drawer, {
    open: open,
    headerTitle: title,
    footerContent: footer,
    position: Position.BOTTOM,
    onClose: onClose,
    children: body
  }) : /*#__PURE__*/jsx(Dimmer, {
    open: open,
    scrollable: scroll === Scroll.VIEWPORT,
    contentPosition: position,
    disableClickToClose: disableDimmerClickToClose,
    onClose: onClose,
    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', {
              'tw-modal-compact': isCompact,
              'tw-modal-no-title': !title
            }),
            children: [/*#__PURE__*/jsxs("div", {
              className: clsx('tw-modal-header', 'd-flex', 'align-items-center', 'justify-content-between', 'flex-wrap', {
                'modal--withoutborder': !title || noDivider
              }),
              children: [/*#__PURE__*/jsx(Title, {
                id: titleId,
                type: Typography.TITLE_BODY,
                className: "tw-modal-title",
                children: title
              }), /*#__PURE__*/jsx(CloseButton, {
                onClick: onClose
              })]
            }), /*#__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', {
                'modal--withoutborder': noDivider
              }),
              children: footer
            })]
          })
        })
      })
    })
  });
};

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