var _excluded = ["children", "exit", "showModal", "backdropClickExits", "boundingBoxRef"];
function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
import React from "preact/compat";
import { useRef, useEffect, useLayoutEffect } from "preact/compat";
import dialogPolyfill from "./polyfill";
/**
 * This is an internal component and may change without warning. Use at your own risk!
 */
export var NativeDialog = function NativeDialog(_ref) {
  var children = _ref.children,
    exit = _ref.exit,
    showModal = _ref.showModal,
    backdropClickExits = _ref.backdropClickExits,
    boundingBoxRef = _ref.boundingBoxRef,
    dialogProps = _objectWithoutProperties(_ref, _excluded);
  var dialogRef = useRef(null);

  // Register dialog with the polyfill if necessary
  useLayoutEffect(function () {
    // The registerDialog function itself determines if the polyfill needs to be applied
    dialogPolyfill.registerDialog(dialogRef.current);
  });

  // Call imperative show and close functions on mount/unmount
  useEffect(function () {
    var dialogNode = dialogRef.current;

    // Show the modal
    showModal ? dialogNode.showModal() : dialogNode.show();

    // Bind close event listener for ESC press
    var handleClose = function handleClose(event) {
      event.preventDefault();
      exit(event);
    };
    dialogNode.addEventListener('close', handleClose);
    return function () {
      // Remove the close event handler first, or it will be tripped by our manual close call
      dialogNode.removeEventListener('close', handleClose);

      // It's possible for the element to already be closed, so check first to avoid an error
      if (dialogNode.open) {
        dialogNode.close();
      }
    };
  }, [showModal, exit]);

  // Bind and unbind backdrop click event listeners on mount and unmount
  useEffect(function () {
    if (!backdropClickExits) {
      return;
    }
    var dialogNode = dialogRef.current;
    var handleClick = function handleClick(event) {
      var _boundingBoxRef$curre;
      var boundingNode = (_boundingBoxRef$curre = boundingBoxRef === null || boundingBoxRef === void 0 ? void 0 : boundingBoxRef.current) !== null && _boundingBoxRef$curre !== void 0 ? _boundingBoxRef$curre : dialogRef.current;
      var rect = boundingNode.getBoundingClientRect();
      var 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 function () {
      dialogNode.removeEventListener('click', handleClick);
    };
  }, [exit, backdropClickExits]);
  return /*#__PURE__*/React.createElement("dialog", _extends({
    ref: dialogRef
  }, dialogProps), children);
};
export default NativeDialog;