(function() {
  var useEffect = React.useEffect;
  var GlassSurface = window.GlassSurface;

  function GlassModal(props) {
    var open = props.open;
    var onClose = props.onClose;
    var children = props.children;
    var className = props.className || '';
    var title = props.title;

    useEffect(function() {
      if (!open) return;
      function onKey(e) {
        if (e.key === 'Escape' && onClose) onClose();
      }
      document.addEventListener('keydown', onKey);
      document.body.style.overflow = 'hidden';
      return function() {
        document.removeEventListener('keydown', onKey);
        document.body.style.overflow = '';
      };
    }, [open, onClose]);

    if (!open) return null;

    return React.createElement('div', {
      className: 'glass-overlay',
      role: 'dialog',
      'aria-modal': true,
      'aria-label': title,
      onClick: function(e) { if (e.target === e.currentTarget && onClose) onClose(); }
    },
      React.createElement(GlassSurface, {
        elevation: 5,
        radius: 'xl',
        className: 'glass-modal ' + className,
        tone: 'adaptive',
        onClick: function(e) { e.stopPropagation(); }
      }, children)
    );
  }

  window.GlassModal = GlassModal;
})();