'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var _tslib = require('../../_virtual/_tslib.js');
var React = require('react');
var ReactDOM = require('react-dom');
var useKeyPress = require('../../hooks/useKeyPress.js');
var useTrappedFocus = require('../../hooks/useTrappedFocus.js');
var index = require('../../utils/index.js');
var index$1 = require('./components/bottomSheetContent/index.js');
var styles = require('./styles.js');

function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }

var React__default = /*#__PURE__*/_interopDefaultLegacy(React);

function BottomSheet(_a) {
    var { bottomSheetRoot, isOpened, shouldCloseOnEsc, shouldCloseOnOverlayClick, onClose, allowBackgroundInteractions, bodyRef } = _a, props = _tslib.__rest(_a, ["bottomSheetRoot", "isOpened", "shouldCloseOnEsc", "shouldCloseOnOverlayClick", "onClose", "allowBackgroundInteractions", "bodyRef"]);
    const overlayRef = React.useRef(null);
    const mainElement = React.useRef(index.getComponentRoot(bottomSheetRoot));
    const appendId = index.getId(props['id']);
    useTrappedFocus.useTrappedFocus(overlayRef);
    const escapePressed = useKeyPress.useKeyPress('Escape', mainElement);
    React.useEffect(() => {
        if (shouldCloseOnEsc &&
            !allowBackgroundInteractions &&
            isOpened &&
            escapePressed)
            onClose();
    }, [escapePressed]);
    // overlay click handler
    React.useEffect(() => {
        const overlayClickHandler = (event) => event.target === overlayRef.current && onClose();
        const removeHandler = () => { var _a; return (_a = overlayRef.current) === null || _a === void 0 ? void 0 : _a.removeEventListener('click', overlayClickHandler); };
        if (overlayRef.current) {
            if (shouldCloseOnOverlayClick && !allowBackgroundInteractions)
                overlayRef.current.addEventListener('click', overlayClickHandler);
            else
                removeHandler();
        }
        return removeHandler;
    }, [isOpened, shouldCloseOnOverlayClick, allowBackgroundInteractions]);
    // overflow handler
    React.useEffect(() => {
        var _a;
        if (isOpened) {
            document.body.style.overflow = 'hidden';
            (_a = mainElement.current) === null || _a === void 0 ? void 0 : _a.setAttribute('aria-hidden', 'true');
        }
        return () => {
            var _a;
            document.body.style.overflow = 'auto';
            (_a = mainElement.current) === null || _a === void 0 ? void 0 : _a.removeAttribute('aria-hidden');
        };
    }, [isOpened]);
    return isOpened
        ? ReactDOM.createPortal(React__default['default'].createElement(styles.Overlay, { ref: overlayRef, isOpened: isOpened, allowBackgroundInteractions: allowBackgroundInteractions, "data-testid": `${props['data-testid']}-bottom-sheet-overlay`, id: appendId('overlay') },
            React__default['default'].createElement(index$1.BottomSheetContent, Object.assign({}, props, { bottomSheetRoot: bottomSheetRoot, isOpened: isOpened, shouldCloseOnEsc: shouldCloseOnEsc && !allowBackgroundInteractions, shouldCloseOnOverlayClick: shouldCloseOnOverlayClick && !allowBackgroundInteractions, onClose: onClose, bodyRef: bodyRef, id: appendId('content') }))), mainElement.current)
        : null;
}

exports.BottomSheet = BottomSheet;
