'use strict';

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

var _tslib = require('../../_virtual/_tslib.js');
var React = require('react');
var ReactDOM = require('react-dom');
var useKeyPress = require('../../hooks/useKeyPress.js');
var index = require('../../utils/index.js');
var styles = require('./styles.js');
require('../IconButton/styles.js');
require('../Spinner/styles.js');
require('../Button/index.js');
var DialogContent = require('./components/DialogContent.js');
var useTrappedFocus = require('../../hooks/useTrappedFocus.js');

function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }

var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
var ReactDOM__default = /*#__PURE__*/_interopDefaultLegacy(ReactDOM);

function Modal(_a) {
    var { children, className, isOpen = false, modalRoot, onClose = index.noop, shouldCloseOnEsc = true, shouldCloseOnOverlayClick = true, pinnedFooter = true, size = 'medium', position = 'center', action, variant = 'wide', hideCloseIcon = false, title, primaryAction, dismissAction, stackedActionButtons = false, isLoading = false } = _a, props = _tslib.__rest(_a, ["children", "className", "isOpen", "modalRoot", "onClose", "shouldCloseOnEsc", "shouldCloseOnOverlayClick", "pinnedFooter", "size", "position", "action", "variant", "hideCloseIcon", "title", "primaryAction", "dismissAction", "stackedActionButtons", "isLoading"]);
    const overlayRef = React.useRef(null);
    useTrappedFocus.useTrappedFocus(overlayRef);
    const appendTestId = index.getId(props['data-testid']);
    const appendTrackId = index.getId(props['data-trackid']);
    // set modal root
    const mainElement = React.useRef(index.getComponentRoot(modalRoot));
    const escapePressed = useKeyPress.useKeyPress('Escape', mainElement);
    React.useEffect(() => {
        if (shouldCloseOnEsc && isOpen && escapePressed)
            onClose();
    }, [escapePressed]);
    // overlay click handler
    React.useEffect(() => {
        const overlayClickHandler = (event) => event.target === overlayRef.current && onClose();
        const removeHandler = () => { var _a; return (_a = overlayRef.current) === null || _a === void 0 ? void 0 : _a.removeEventListener('click', overlayClickHandler); };
        if (overlayRef.current) {
            if (shouldCloseOnOverlayClick)
                overlayRef.current.addEventListener('click', overlayClickHandler);
            else
                removeHandler();
        }
        return removeHandler;
    }, [isOpen, shouldCloseOnOverlayClick]);
    // overflow handler
    React.useEffect(() => {
        if (isOpen) {
            document.body.style.overflow = 'hidden';
            mainElement.current &&
                mainElement.current.setAttribute('aria-hidden', 'true');
        }
        return () => {
            document.body.style.overflow = 'auto';
            mainElement.current && mainElement.current.removeAttribute('aria-hidden');
        };
    }, [isOpen]);
    return isOpen
        ? ReactDOM__default['default'].createPortal(React__default['default'].createElement(styles.Overlay, { className: className, ref: overlayRef, isOpen: isOpen, "data-testid": appendTestId('overlay'), "data-trackid": appendTrackId('overlay'), "aria-label": props['aria-label'] },
            React__default['default'].createElement(styles.Dialog, { onClick: (event) => {
                    event.stopPropagation();
                    event.nativeEvent.stopImmediatePropagation();
                }, role: "dialog", "data-testid": appendTestId('dialog-wrapper'), "data-trackid": appendTrackId('dialog-wrapper'), size: size, position: position, variant: variant },
                React__default['default'].createElement(DialogContent.DialogContent, Object.assign({ onClose: onClose, pinnedFooter: pinnedFooter, action: action, variant: variant, hideCloseIcon: hideCloseIcon, title: title, primaryAction: primaryAction, dismissAction: dismissAction, stackedActionButtons: stackedActionButtons, isLoading: isLoading }, props), children))), mainElement.current)
        : null;
}

exports.Modal = Modal;
