import { clsx } from 'clsx';
import { useId, useContext } from 'react';
import '../common/theme.mjs';
import '../common/direction.mjs';
import '../common/propsValues/control.mjs';
import '../common/propsValues/breakpoint.mjs';
import '../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 '../common/propsValues/scroll.mjs';
import '../common/propsValues/markdownNodeType.mjs';
import '../common/fileType.mjs';
import { Cross } from '@transferwise/icons';
import { useIntl } from 'react-intl';
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 { OverlayIdContext } from '../provider/overlay/OverlayIdProvider.mjs';
import SlidingPanel from '../slidingPanel/SlidingPanel.mjs';
import Title from '../title/Title.mjs';
import { logActionRequiredIf } from '../utilities/logActionRequired.mjs';
import IconButton from '../iconButton/IconButton.mjs';

function Drawer({
  children,
  className,
  footerContent,
  headerTitle,
  onClose,
  onUnmount,
  open = false,
  position = 'right',
  role = 'dialog',
  'aria-labelledby': ariaLabelledBy
}) {
  const intl = useIntl();
  logActionRequiredIf('Drawer now expects `onClose`, and will soon make this prop required. Please update your usage to provide it.', !onClose);
  const {
    isMobile
  } = useLayout();
  const titleId = useId();
  const overlayId = useContext(OverlayIdContext);
  return /*#__PURE__*/jsx(Dimmer, {
    open: open,
    onClose: onClose,
    onExited: onUnmount,
    children: /*#__PURE__*/jsx(SlidingPanel, {
      open: open,
      position: isMobile ? Position.BOTTOM : position,
      children: /*#__PURE__*/jsxs("div", {
        id: overlayId,
        role: role,
        "aria-modal": true,
        "aria-labelledby": ariaLabelledBy || (headerTitle ? titleId : undefined),
        className: clsx('np-drawer', className),
        children: [/*#__PURE__*/jsxs("div", {
          className: clsx('np-drawer-header', 'd-flex', 'align-items-center', headerTitle ? 'justify-content-between' : 'justify-content-end', 'flex-wrap'),
          children: [headerTitle && /*#__PURE__*/jsx(Title, {
            id: titleId,
            type: Typography.TITLE_SUBSECTION,
            className: "np-drawer-title",
            children: headerTitle
          }), /*#__PURE__*/jsx(IconButton, {
            size: 40,
            priority: "tertiary",
            "aria-label": intl.formatMessage(closeBtnMessages.ariaLabel),
            onClick: onClose,
            children: /*#__PURE__*/jsx(Cross, {})
          })]
        }), children && /*#__PURE__*/jsx("div", {
          className: clsx('np-drawer-content'),
          children: children
        }), footerContent ? /*#__PURE__*/jsx("div", {
          className: clsx('np-drawer-footer'),
          children: footerContent
        }) : /*#__PURE__*/jsx("div", {
          className: "m-t-3"
        })]
      })
    })
  });
}

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