import { __rest } from '../../_virtual/_tslib.js';
import React__default, { useRef, useEffect } from 'react';
import ReactDOM from 'react-dom';
import { useKeyPress } from '../../hooks/useKeyPress.js';
import { getId, getComponentRoot, noop } from '../../utils/index.js';
import { Overlay, Dialog } from './styles.js';
import '../IconButton/styles.js';
import '../Spinner/styles.js';
import '../Button/index.js';
import { DialogContent } from './components/DialogContent.js';
import { useTrappedFocus } from '../../hooks/useTrappedFocus.js';

function Modal(_a) {
    var { children, className, isOpen = false, modalRoot, onClose = 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 = __rest(_a, ["children", "className", "isOpen", "modalRoot", "onClose", "shouldCloseOnEsc", "shouldCloseOnOverlayClick", "pinnedFooter", "size", "position", "action", "variant", "hideCloseIcon", "title", "primaryAction", "dismissAction", "stackedActionButtons", "isLoading"]);
    const overlayRef = useRef(null);
    useTrappedFocus(overlayRef);
    const appendTestId = getId(props['data-testid']);
    const appendTrackId = getId(props['data-trackid']);
    // set modal root
    const mainElement = useRef(getComponentRoot(modalRoot));
    const escapePressed = useKeyPress('Escape', mainElement);
    useEffect(() => {
        if (shouldCloseOnEsc && isOpen && escapePressed)
            onClose();
    }, [escapePressed]);
    // overlay click handler
    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
    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.createPortal(React__default.createElement(Overlay, { className: className, ref: overlayRef, isOpen: isOpen, "data-testid": appendTestId('overlay'), "data-trackid": appendTrackId('overlay'), "aria-label": props['aria-label'] },
            React__default.createElement(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.createElement(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;
}

export { Modal };
