"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = exports.NativeDialog = void 0;
var _react = require("react");
var _polyfill = _interopRequireDefault(require("./polyfill"));
var _jsxRuntime = require("react/jsx-runtime");
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
/**
 * This is an internal component and may change without warning. Use at your own risk!
 */
const NativeDialog = _ref => {
  let {
    children,
    exit,
    isOpen,
    showModal,
    backdropClickExits,
    boundingBoxRef,
    ...dialogProps
  } = _ref;
  const dialogRef = (0, _react.useRef)(null);
  if (isOpen === undefined) {
    if (process.env.NODE_ENV !== 'production') {
      console.warn("The 'isOpen' prop is now used to control the state of Dialogs and Drawers. Please do not conditionally render these components to control their state. All Dialogs and Drawers will become invisible without this prop in the next major release. Using this prop will fix a focus-management issue that affects accessibility.");
    }
    isOpen = true;
  }

  // Register dialog with the polyfill if necessary
  (0, _react.useLayoutEffect)(() => {
    // The registerDialog function itself determines if the polyfill needs to be applied
    _polyfill.default.registerDialog(dialogRef.current);
  });

  // Call imperative show and close functions on mount/unmount
  (0, _react.useEffect)(() => {
    const dialogNode = dialogRef.current;

    // Show or hide the dialog based on `isOpen` value. The `dialogNode.open` property is
    // a read-only value that will tell us if our dialog DOM element is actually in the
    // open state.
    let closingBecauseOfProp = false;
    if (isOpen) {
      if (!dialogNode.open) {
        showModal ? dialogNode.showModal() : dialogNode.show();
      }
    } else {
      if (dialogNode.open) {
        dialogNode.close();
        closingBecauseOfProp = true;
      }
    }

    // Bind close event listener for ESC press
    const handleClose = event => {
      event.preventDefault();
      // Only call the exit handler if the parent didn't close it by setting isOpen to false
      if (!closingBecauseOfProp) {
        exit(event);
      }
    };
    dialogNode.addEventListener('close', handleClose);
    return () => {
      dialogNode.removeEventListener('close', handleClose);
    };
  }, [isOpen, showModal, exit]);

  // Bind and unbind backdrop click event listeners on mount and unmount
  (0, _react.useEffect)(() => {
    if (!backdropClickExits) {
      return;
    }
    const dialogNode = dialogRef.current;
    const handleClick = event => {
      const boundingNode = boundingBoxRef?.current ?? dialogRef.current;
      const rect = boundingNode.getBoundingClientRect();
      const isInDialog = rect.top <= event.clientY && event.clientY <= rect.top + rect.height && rect.left <= event.clientX && event.clientX <= rect.left + rect.width;
      if (!isInDialog) {
        exit();
      }
    };
    dialogNode.addEventListener('click', handleClick);
    return () => {
      dialogNode.removeEventListener('click', handleClick);
    };
  }, [exit, backdropClickExits]);
  return /*#__PURE__*/(0, _jsxRuntime.jsx)("dialog", {
    ref: dialogRef,
    ...dialogProps,
    children: children
  });
};
exports.NativeDialog = NativeDialog;
var _default = NativeDialog;
exports.default = _default;