import React, { useEffect, useRef, useImperativeHandle } from 'react';
import ReactDOM from 'react-dom';
import { ReactComponent as CloseSvg } from './icon/close.svg';
import { useClickOverlay } from "../../hooks";
import { TITLE_SIZE } from "../../globalStyled";
const { subheadline } = TITLE_SIZE;
import { ModalWrapperDiv, OverlayStyled, ModalCloseDiv, ActionBarDiv, HeaderWrapperDiv, ContentWrapperDiv, HeaderBlockTitle, } from './styled';
const ESC = 27;
export const ModalOur = React.forwardRef(({ children, className, onClose, onClick, visible, isCloseIcon = true, actionBar, header }, ref) => {
    const $OverlayRef = useRef(null);
    const modalRoot = document.getElementById('modal-root');
    if (!modalRoot)
        return null;
    const { handleOverlayClick, modalContentRef } = useClickOverlay({
        onClose,
    });
    useImperativeHandle(ref, () => $OverlayRef.current);
    const handleKeyUp = (event) => {
        if (event.keyCode === ESC) {
            onClose(event);
        }
    };
    useEffect(() => {
        document.body.addEventListener('keyup', handleKeyUp);
        return () => {
            document.body.removeEventListener('keyup', handleKeyUp);
        };
    }, []);
    const Portal = (React.createElement(OverlayStyled, { onClick: handleOverlayClick, ref: $OverlayRef },
        React.createElement(ModalWrapperDiv, { className: className, ref: modalContentRef },
            React.createElement(HeaderWrapperDiv, null,
                header ? React.createElement(HeaderBlockTitle, { size: subheadline }, header()) : React.createElement("div", null),
                isCloseIcon && (React.createElement(ModalCloseDiv, { onClick: onClose },
                    React.createElement(CloseSvg, null)))),
            React.createElement(ContentWrapperDiv, null, children),
            actionBar && React.createElement(ActionBarDiv, null, actionBar()))));
    return ReactDOM.createPortal(Portal, modalRoot);
});
