import { __assign, __read, __rest, __spreadArray } from "tslib";
// @ts-nocheck
import './Modal.css';
import React, { useEffect, useRef } from 'react';
import { CSSTransition } from 'react-transition-group';
import { useClickOutside } from '../../hooks/useClickOutside/useClickOutside';
import { useGlobalKeys } from '../../hooks/useGlobalKeys/useGlobalKeys';
import { IconClose } from '../../icons/IconClose/IconClose';
import { cn } from '../../utils/bem';
import { cnForCssTransition } from '../../utils/cnForCssTransition';
import { Button } from '../Button/Button';
import { PortalWithTheme, usePortalContext } from '../PortalWithTheme/PortalWithTheme';
import { useTheme } from '../Theme/Theme';
var modalPropWidth = ['auto', 'full'];
var modalPropWidthDefault = modalPropWidth[0];
var modalPropView = ['default', 'iframe', 'form'];
var modalPropViewDefault = modalPropView[0];
var modalPropPosition = ['center', 'top'];
var modalPropPositionDefault = modalPropPosition[0];
var cnModal = cn('Modal');
/**
 * Подписчик на PortalWithThemeProvider
 * получает рефы всех вложенных порталов в модалку
 * для дальнейшего исключения их из useClickOutside
 */
var ContextConsumer = function (_a) {
    var onClickOutside = _a.onClickOutside, children = _a.children, ignoreClicksInsideRefs = _a.ignoreClicksInsideRefs;
    var refs = usePortalContext().refs;
    useClickOutside({
        isActive: !!onClickOutside,
        ignoreClicksInsideRefs: __spreadArray(__spreadArray([], __read((ignoreClicksInsideRefs || [])), false), __read((refs || [])), false),
        handler: function (event) { return onClickOutside === null || onClickOutside === void 0 ? void 0 : onClickOutside(event); }
    });
    return React.createElement(React.Fragment, null, children);
};
export 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 = __rest(props, ["isOpen", "onClose", "onOpen", "hasOverlay", "onOverlayClick", "onClickOutside", "onEsc", "className", "view", "width", "position", "children", "container", "refsForExcludeClickOutside", "rootClassName", "showCloseButton", "inverted", "visibleHeader", "scroll"]);
    var ref = useRef(null);
    var theme = useTheme().theme;
    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]);
    useGlobalKeys({
        Escape: function (e) {
            if (isOpen && onEsc) {
                onEsc(e);
                document.body.style.overflow = 'unset';
            }
        }
    });
    return (React.createElement(CSSTransition, { "in": isOpen, unmountOnExit: true, appear: true, classNames: cnForCssTransition(cnModal), timeout: 200 },
        React.createElement(PortalWithTheme, { preset: theme, container: container, className: cnModal({ visibleHeader: visibleHeader, scroll: scroll }, [rootClassName]) },
            hasOverlay && React.createElement("div", { className: cnModal('Overlay'), "aria-label": "Overlay" }),
            React.createElement("div", __assign({ className: cnModal('Window', { width: width, position: position, view: view, inverted: inverted }, [className]), ref: ref }, rest),
                React.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: __spreadArray(__spreadArray([], __read((refsForExcludeClickOutside || [])), false), [ref], false) },
                    showCloseButton && (React.createElement(Button, { view: "ghost", iconRight: 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)))));
};
