import React, { useEffect } from 'react';
import { escapePressed } from '@universal-login/commons';
import { Notice } from '../commons/Notice';
import { useThemeClassFor } from '../utils/classFor';
import './../styles/modal.sass';
import './../styles/modalDefaults.sass';
import './../styles/themes/UniLogin/modalThemeUniLogin.sass';
import './../styles/themes/Legacy/modalThemeLegacy.sass';
import './../styles/themes/Jarvis/modalThemeJarvis.sass';
export var ModalWrapper = function (_a) {
    var children = _a.children, modalClassName = _a.modalClassName, hideModal = _a.hideModal, message = _a.message;
    var listenKeyboard = function (event) {
        if (escapePressed(event) && hideModal) {
            hideModal();
        }
    };
    useEffect(function () {
        window.addEventListener('keydown', listenKeyboard, true);
        return function () {
            window.removeEventListener('keydown', listenKeyboard, true);
        };
    });
    return (React.createElement("div", { className: modalClassName ? "universal-login " + modalClassName : 'universal-login universal-login-default' },
        React.createElement("div", { className: "modal-overlay", onClick: hideModal }),
        React.createElement("div", { className: useThemeClassFor() + " modal-wrapper" },
            React.createElement("div", { className: "modal" },
                !!hideModal && React.createElement("button", { onClick: hideModal, className: "modal-close-btn" }),
                children),
            React.createElement(Notice, { message: message }))));
};
//# sourceMappingURL=ModalWrapper.js.map