"use strict";
exports.__esModule = true;
exports.Modal = void 0;
var tslib_1 = require("tslib");
// @ts-nocheck
require("./Modal.css");
var react_1 = (0, tslib_1.__importStar)(require("react"));
var react_transition_group_1 = require("react-transition-group");
var useClickOutside_1 = require("../../hooks/useClickOutside/useClickOutside");
var useGlobalKeys_1 = require("../../hooks/useGlobalKeys/useGlobalKeys");
var IconClose_1 = require("../../icons/IconClose/IconClose");
var bem_1 = require("../../utils/bem");
var cnForCssTransition_1 = require("../../utils/cnForCssTransition");
var Button_1 = require("../Button/Button");
var PortalWithTheme_1 = require("../PortalWithTheme/PortalWithTheme");
var Theme_1 = require("../Theme/Theme");
var modalPropWidth = ['auto', 'full'];
var modalPropWidthDefault = modalPropWidth[0];
var modalPropView = ['default', 'iframe', 'form', 'form-secondary'];
var modalPropViewDefault = modalPropView[0];
var modalPropPosition = ['center', 'top'];
var modalPropPositionDefault = modalPropPosition[0];
var cnModal = (0, bem_1.cn)('Modal');
/**
 * Подписчик на PortalWithThemeProvider
 * получает рефы всех вложенных порталов в модалку
 * для дальнейшего исключения их из useClickOutside
 */
var ContextConsumer = function (_a) {
    var onClickOutside = _a.onClickOutside, children = _a.children, ignoreClicksInsideRefs = _a.ignoreClicksInsideRefs;
    var refs = (0, PortalWithTheme_1.usePortalContext)().refs;
    (0, useClickOutside_1.useClickOutside)({
        isActive: !!onClickOutside,
        ignoreClicksInsideRefs: (0, tslib_1.__spreadArray)((0, tslib_1.__spreadArray)([], (0, tslib_1.__read)((ignoreClicksInsideRefs || [])), false), (0, tslib_1.__read)((refs || [])), false),
        handler: function (event) { return onClickOutside === null || onClickOutside === void 0 ? void 0 : onClickOutside(event); }
    });
    return react_1["default"].createElement(react_1["default"].Fragment, null, children);
};
var Modal = function (props) {
    var isOpen = props.isOpen, onClose = props.onClose, onOpen = props.onOpen, _a = props.hasOverlay, hasOverlay = _a === void 0 ? true : _a, onOverlayClick = props.onOverlayClick, onClickOutside = props.onClickOutside, onEsc = props.onEsc, className = props.className, _b = props.view, view = _b === void 0 ? modalPropViewDefault : _b, _c = props.width, width = _c === void 0 ? modalPropWidthDefault : _c, _d = props.position, position = _d === void 0 ? modalPropPositionDefault : _d, children = props.children, _e = props.container, container = _e === void 0 ? window.document.body : _e, refsForExcludeClickOutside = props.refsForExcludeClickOutside, rootClassName = props.rootClassName, showCloseButton = props.showCloseButton, inverted = props.inverted, visibleHeader = props.visibleHeader, scroll = props.scroll, rest = (0, tslib_1.__rest)(props, ["isOpen", "onClose", "onOpen", "hasOverlay", "onOverlayClick", "onClickOutside", "onEsc", "className", "view", "width", "position", "children", "container", "refsForExcludeClickOutside", "rootClassName", "showCloseButton", "inverted", "visibleHeader", "scroll"]);
    var ref = (0, react_1.useRef)(null);
    var theme = (0, Theme_1.useTheme)().theme;
    (0, react_1.useEffect)(function () {
        if (isOpen) {
            onOpen === null || onOpen === void 0 ? void 0 : onOpen();
            document.body.style.overflow = 'hidden';
        }
        else {
            onClose === null || onClose === void 0 ? void 0 : onClose();
            document.body.style.overflow = 'unset';
        }
        // eslint-disable-next-line react-hooks/exhaustive-deps
    }, [isOpen]);
    (0, useGlobalKeys_1.useGlobalKeys)({
        Escape: function (e) {
            if (isOpen && onEsc) {
                onEsc(e);
                document.body.style.overflow = 'unset';
            }
        }
    });
    return (react_1["default"].createElement(react_transition_group_1.CSSTransition, { "in": isOpen, unmountOnExit: true, appear: true, classNames: (0, cnForCssTransition_1.cnForCssTransition)(cnModal), timeout: 200 },
        react_1["default"].createElement(PortalWithTheme_1.PortalWithTheme, { preset: theme, container: container, className: cnModal({ visibleHeader: visibleHeader, scroll: scroll }, [rootClassName]) },
            hasOverlay && react_1["default"].createElement("div", { className: cnModal('Overlay'), "aria-label": "Overlay" }),
            react_1["default"].createElement("div", (0, tslib_1.__assign)({ className: cnModal('Window', { width: width, position: position, view: view, inverted: inverted }, [className]), ref: ref }, rest),
                react_1["default"].createElement(ContextConsumer, { onClickOutside: function (event) {
                        (onClickOutside === null || onClickOutside === void 0 ? void 0 : onClickOutside(event)) || (onOverlayClick === null || onOverlayClick === void 0 ? void 0 : onOverlayClick(event));
                        document.body.style.overflow = 'unset';
                    }, ignoreClicksInsideRefs: (0, tslib_1.__spreadArray)((0, tslib_1.__spreadArray)([], (0, tslib_1.__read)((refsForExcludeClickOutside || [])), false), [ref], false) },
                    showCloseButton && (react_1["default"].createElement(Button_1.Button, { view: "ghost", iconRight: IconClose_1.IconClose, iconSize: "s", className: cnModal('Close'), onClick: function (event) {
                            (onClickOutside === null || onClickOutside === void 0 ? void 0 : onClickOutside(event)) || (onOverlayClick === null || onOverlayClick === void 0 ? void 0 : onOverlayClick(event));
                            document.body.style.overflow = 'unset';
                        } })),
                    children)))));
};
exports.Modal = Modal;
