'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var componentsTheming = require('@wise/components-theming');
var clsx = require('clsx');
var React = require('react');
var reactTransitionGroup = require('react-transition-group');
var deviceDetection = require('../common/deviceDetection/deviceDetection.js');
var DOMOperations = require('../common/DOMOperations/DOMOperations.js');
require('../common/theme.js');
require('../common/direction.js');
require('../common/propsValues/control.js');
require('../common/propsValues/breakpoint.js');
require('../common/propsValues/size.js');
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');
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');
require('../common/propsValues/scroll.js');
require('../common/propsValues/markdownNodeType.js');
require('../common/fileType.js');
require('@transferwise/icons');
require('react-intl');
require('../common/closeButton/CloseButton.messages.js');
var jsxRuntime = require('react/jsx-runtime');
var FocusBoundary = require('../common/focusBoundary/FocusBoundary.js');
var withNextPortal = require('../withNextPortal/withNextPortal.js');
var DimmerManager = require('./dimmerManager/DimmerManager.js');

const EXIT_ANIMATION = 350;
const dimmerManager = new DimmerManager.default();
const handleTouchMove = event => {
  const isTouchedElementDimmer = event.target.classList.contains('dimmer');
  // disable scroll on iOS devices for Dimmer area
  // this is because of bug in WebKit https://bugs.webkit.org/show_bug.cgi?id=220908
  // note: scrolling still works for children(s) as expected
  if (deviceDetection.isIosDevice() && isTouchedElementDimmer) {
    event.stopPropagation();
    event.preventDefault();
  }
};
const Dimmer$1 = ({
  children,
  className,
  disableClickToClose = false,
  contentPosition,
  fadeContentOnEnter = false,
  fadeContentOnExit = false,
  open = false,
  scrollable = false,
  transparent = false,
  onClose,
  onExited: handleExited
}) => {
  const [hasNotExited, setHasNotExited] = React.useState(false);
  const dimmerReference = React.useRef(null);
  const closeOnClick = event => {
    if (event.target === dimmerReference.current) {
      onClose?.(event);
    }
  };
  const handleClick = event => {
    if (disableClickToClose || !onClose) {
      return;
    }
    closeOnClick(event);
  };
  const handleKeyDown = React.useCallback(event => {
    if (event.key !== 'Escape') {
      return;
    }
    event.stopPropagation();
    if (onClose && dimmerReference.current && dimmerManager.isTop(dimmerReference.current)) {
      onClose(event);
    }
  }, [onClose]);
  const onEnter = () => {
    setHasNotExited(true);
    if (dimmerReference.current) {
      dimmerManager.add(dimmerReference.current);
    }
  };
  const onExited = () => {
    setHasNotExited(false);
    if (dimmerReference.current) {
      dimmerManager.remove(dimmerReference.current);
    }
    handleExited?.();
  };
  React.useEffect(() => {
    const localReferenceCopy = dimmerReference.current;
    if (open) {
      document.addEventListener('keydown', handleKeyDown);
      localReferenceCopy?.addEventListener('touchmove', handleTouchMove, {
        passive: true
      });
    }
    return () => {
      document.removeEventListener('keydown', handleKeyDown);
      localReferenceCopy?.removeEventListener('touchmove', handleTouchMove);
    };
  }, [handleKeyDown, open]);
  return /*#__PURE__*/jsxRuntime.jsx(DimmerWrapper, {
    open: open,
    hasNotExited: hasNotExited,
    children: /*#__PURE__*/jsxRuntime.jsx(reactTransitionGroup.CSSTransition, {
      nodeRef: dimmerReference,
      in: open,
      appear: true
      // Wait for animation to finish before unmount.
      ,
      timeout: {
        enter: 0,
        exit: EXIT_ANIMATION
      },
      classNames: {
        enter: clsx.clsx({
          'dimmer--enter-fade': fadeContentOnEnter
        }),
        enterDone: clsx.clsx('dimmer--enter-done', {
          'dimmer--enter-fade': fadeContentOnEnter
        }),
        exit: clsx.clsx('dimmer--exit', {
          'dimmer--exit-fade': fadeContentOnExit
        })
      },
      unmountOnExit: true,
      onEnter: onEnter,
      onExited: onExited,
      children: /*#__PURE__*/jsxRuntime.jsx(DimmerContentWrapper, {
        scrollBody: !transparent,
        children: /*#__PURE__*/jsxRuntime.jsx(FocusBoundary.default, {
          children: /*#__PURE__*/jsxRuntime.jsx("div", {
            ref: dimmerReference,
            className: clsx.clsx('dimmer', {
              'dimmer--scrollable': scrollable,
              'dimmer--transparent': transparent
            }, className),
            role: "presentation",
            onClick: handleClick,
            children: /*#__PURE__*/jsxRuntime.jsx("div", {
              className: clsx.clsx('dimmer-content-positioner', contentPosition != null && ['d-flex justify-content-center', {
                'align-items-start': contentPosition === 'top',
                'align-items-center': contentPosition === 'center',
                'align-items-end': contentPosition === 'bottom'
              }]),
              children: children
            })
          })
        })
      })
    })
  });
};
const DimmerWrapper = ({
  open,
  hasNotExited,
  children
}) => {
  const {
    screenMode,
    theme
  } = componentsTheming.useTheme();
  return open || hasNotExited ? /*#__PURE__*/jsxRuntime.jsx(componentsTheming.ThemeProvider, {
    theme: "personal",
    screenMode: theme === 'personal' ? screenMode : 'light',
    children: children
  }) : /*#__PURE__*/jsxRuntime.jsx(jsxRuntime.Fragment, {
    children: children
  });
};
const DimmerContentWrapper = ({
  children,
  scrollBody
}) => {
  React.useEffect(() => {
    if (scrollBody) {
      DOMOperations.addNoScrollClass();
    }
    return () => {
      if (scrollBody) {
        DOMOperations.removeNoScrollClass();
      }
    };
  }, [scrollBody]);
  return children;
};
var Dimmer = withNextPortal.default(Dimmer$1);

exports.Dimmer = Dimmer$1;
exports.DimmerContentWrapper = DimmerContentWrapper;
exports.EXIT_ANIMATION = EXIT_ANIMATION;
exports.default = Dimmer;
exports.handleTouchMove = handleTouchMove;
//# sourceMappingURL=Dimmer.js.map
