import { __rest } from '../../_virtual/_tslib.js';
import React__default, { useRef, useEffect } from 'react';
import { createPortal } from 'react-dom';
import { useKeyPress } from '../../hooks/useKeyPress.js';
import { useTrappedFocus } from '../../hooks/useTrappedFocus.js';
import { getComponentRoot, getId } from '../../utils/index.js';
import { BottomSheetContent } from './components/bottomSheetContent/index.js';
import { Overlay } from './styles.js';

function BottomSheet(_a) {
    var { bottomSheetRoot, isOpened, shouldCloseOnEsc, shouldCloseOnOverlayClick, onClose, allowBackgroundInteractions, bodyRef } = _a, props = __rest(_a, ["bottomSheetRoot", "isOpened", "shouldCloseOnEsc", "shouldCloseOnOverlayClick", "onClose", "allowBackgroundInteractions", "bodyRef"]);
    const overlayRef = useRef(null);
    const mainElement = useRef(getComponentRoot(bottomSheetRoot));
    const appendId = getId(props['id']);
    useTrappedFocus(overlayRef);
    const escapePressed = useKeyPress('Escape', mainElement);
    useEffect(() => {
        if (shouldCloseOnEsc &&
            !allowBackgroundInteractions &&
            isOpened &&
            escapePressed)
            onClose();
    }, [escapePressed]);
    // overlay click handler
    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
    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
        ? createPortal(React__default.createElement(Overlay, { ref: overlayRef, isOpened: isOpened, allowBackgroundInteractions: allowBackgroundInteractions, "data-testid": `${props['data-testid']}-bottom-sheet-overlay`, id: appendId('overlay') },
            React__default.createElement(BottomSheetContent, Object.assign({}, props, { bottomSheetRoot: bottomSheetRoot, isOpened: isOpened, shouldCloseOnEsc: shouldCloseOnEsc && !allowBackgroundInteractions, shouldCloseOnOverlayClick: shouldCloseOnOverlayClick && !allowBackgroundInteractions, onClose: onClose, bodyRef: bodyRef, id: appendId('content') }))), mainElement.current)
        : null;
}

export { BottomSheet };
