import { useTheme, ThemeProvider } from '@wise/components-theming';
import { clsx } from 'clsx';
import { useState, useRef, useCallback, useEffect } from 'react';
import { CSSTransition } from 'react-transition-group';
import { isIosDevice } from '../common/deviceDetection/deviceDetection.mjs';
import { addNoScrollClass, removeNoScrollClass } from '../common/DOMOperations/DOMOperations.mjs';
import '../common/theme.mjs';
import '../common/direction.mjs';
import '@transferwise/neptune-tokens';
import '../common/propsValues/control.mjs';
import '../common/propsValues/size.mjs';
import '../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 '../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 '@transferwise/formatting';
import '@transferwise/icons';
import 'react-intl';
import '../common/closeButton/CloseButton.messages.mjs';
import { jsx, Fragment } from 'react/jsx-runtime';
import FocusBoundary from '../common/focusBoundary/FocusBoundary.mjs';
import withNextPortalWrapper from '../withNextPortal/withNextPortal.mjs';
import DimmerManager from './dimmerManager/DimmerManager.mjs';

const EXIT_ANIMATION = 350;
const dimmerManager = new DimmerManager();
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 (isIosDevice() && isTouchedElementDimmer) {
    event.stopPropagation();
    event.preventDefault();
  }
};
const Dimmer = ({
  children,
  className,
  disableClickToClose = false,
  contentPosition,
  fadeContentOnEnter = false,
  fadeContentOnExit = false,
  open = false,
  scrollable = false,
  transparent = false,
  onClose,
  onExited: handleExited
}) => {
  const [hasNotExited, setHasNotExited] = useState(false);
  const dimmerReference = useRef(null);
  const closeOnClick = event => {
    if (event.target === dimmerReference.current) {
      onClose?.(event);
    }
  };
  const handleClick = event => {
    if (disableClickToClose || !onClose) {
      return;
    }
    closeOnClick(event);
  };
  const handleKeyDown = 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?.();
  };
  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__*/jsx(DimmerWrapper, {
    open: open,
    hasNotExited: hasNotExited,
    children: /*#__PURE__*/jsx(CSSTransition, {
      nodeRef: dimmerReference,
      in: open,
      appear: true
      // Wait for animation to finish before unmount.
      ,
      timeout: {
        enter: 0,
        exit: EXIT_ANIMATION
      },
      classNames: {
        enter: clsx({
          'dimmer--enter-fade': fadeContentOnEnter
        }),
        enterDone: clsx('dimmer--enter-done', {
          'dimmer--enter-fade': fadeContentOnEnter
        }),
        exit: clsx('dimmer--exit', {
          'dimmer--exit-fade': fadeContentOnExit
        })
      },
      unmountOnExit: true,
      onEnter: onEnter,
      onExited: onExited,
      children: /*#__PURE__*/jsx(DimmerContentWrapper, {
        scrollBody: !transparent,
        children: /*#__PURE__*/jsx(FocusBoundary, {
          children: /*#__PURE__*/jsx("div", {
            ref: dimmerReference,
            className: clsx('dimmer', {
              'dimmer--scrollable': scrollable,
              'dimmer--transparent': transparent
            }, className),
            role: "presentation",
            onClick: handleClick,
            children: /*#__PURE__*/jsx("div", {
              className: 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
  } = useTheme();
  return open || hasNotExited ? /*#__PURE__*/jsx(ThemeProvider, {
    theme: "personal",
    screenMode: theme === 'personal' ? screenMode : 'light',
    children: children
  }) : /*#__PURE__*/jsx(Fragment, {
    children: children
  });
};
const DimmerContentWrapper = ({
  children,
  scrollBody
}) => {
  useEffect(() => {
    if (scrollBody) {
      addNoScrollClass();
    }
    return () => {
      if (scrollBody) {
        removeNoScrollClass();
      }
    };
  }, [scrollBody]);
  return children;
};
var Dimmer$1 = withNextPortalWrapper(Dimmer);

export { Dimmer, DimmerContentWrapper, EXIT_ANIMATION, Dimmer$1 as default, handleTouchMove };
//# sourceMappingURL=Dimmer.mjs.map
