import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { forwardRef, useContext } from 'react';
import { createPortal } from 'react-dom';
import './modal.scss';
import { ThemeContext } from '../ThemeProvider/ThemeProvider';
import classNames from 'classnames';
import { useKeyboardActions } from '../../utils/keyBoardActionUtil/UseKeyboardActions';
const Modal = forwardRef(({ isOpen, onClose, contentLabel, isHeaderDisplayed, headerContent, footerContent, contentClassName, isFooterDisplayed, overlayClassName, shouldCloseOnEsc = true, ariaHideApp = true, shouldCloseOnOverlayClick = true, customWidth = '660px', customHeight = 'auto', children, zIndex = 1500, boxShadow = '', border = '', background = '', style = {}, }, ref) => {
    useKeyboardActions(shouldCloseOnEsc && isOpen
        ? [
            {
                key: 'Escape',
                action: onClose,
            },
        ]
        : []);
    const themeContext = useContext(ThemeContext);
    const currentTheme = themeContext?.currentTheme;
    if (ariaHideApp) {
        document.body.style.overflow = isOpen ? 'hidden' : '';
    }
    if (!isOpen)
        return null;
    return createPortal(_jsx("div", { className: `ff-modal-overlay ${overlayClassName || ''}`, style: { zIndex }, onClick: shouldCloseOnOverlayClick ? onClose : undefined, ref: ref, children: _jsxs("div", { style: {
                boxShadow: boxShadow,
                border: border,
                borderRadius: '8px',
                background: background,
            }, className: "ff-modal-container", children: [_jsxs("div", { className: classNames(`ff-modal-content ${currentTheme} ${contentClassName}`, {
                        'modal-bottom-border': !isFooterDisplayed,
                        'modal-top-border': !isHeaderDisplayed,
                    }), style: {
                        width: customWidth,
                        height: customHeight,
                        ...style,
                    }, onClick: (e) => e.stopPropagation(), "aria-label": contentLabel, children: [isHeaderDisplayed && (_jsx("div", { className: "ff-modal-header", children: headerContent })), children] }), isFooterDisplayed && (_jsx("div", { className: "ff-modal-footer", style: { width: customWidth }, children: footerContent }))] }) }), document.body);
});
export default Modal;
//# sourceMappingURL=Modal.js.map