import React, { useEffect, useMemo, useRef, } from 'react';
import { st, classes } from './SlidingModal.st.css.js';
import { scopeTab } from './scopeTab';
export function SlidingModal(props) {
    const { dataHook, className, style: styleProp, shadowWidth = 20, width, isOpen, children, contentRef, onExited, onEntered, onEntering, onExiting, onRequestClose, transitionStatus, appendTo, overlay, } = props;
    const style = useMemo(() => ({
        ...styleProp,
        transform: `translate3d(${isOpen
            ? 0
            : typeof width === 'number'
                ? `${width + shadowWidth}px`
                : `${width}px`}, 0, 0)`,
    }), [styleProp, width, isOpen]);
    const isOpenRef = useRef(isOpen);
    const divRef = useRef();
    useEffect(() => {
        if (process.env.NODE_ENV === 'test' && isOpen) {
            onEntered?.();
        }
        else {
            if (process.env.NODE_ENV === 'test' && isOpenRef.current) {
                onExited?.();
            }
        }
        isOpenRef.current = isOpen;
    }, [isOpen]);
    useEffect(() => {
        const rootElement = divRef.current;
        if (!rootElement) {
            return;
        }
        const onTransitionEnd = (e) => {
            if (e.propertyName === 'transform') {
                isOpenRef.current ? onEntered?.() : onExited?.();
            }
        };
        const onTransitionStart = (e) => {
            if (e.propertyName === 'transform') {
                isOpenRef.current ? onEntering?.() : onExiting?.();
            }
        };
        rootElement.addEventListener('transitionend', onTransitionEnd);
        rootElement.addEventListener('transitionstart', onTransitionStart);
        return () => {
            rootElement.removeEventListener('transitionend', onTransitionEnd);
            rootElement.removeEventListener('transitionstart', onTransitionStart);
        };
    }, []);
    return (React.createElement("div", { tabIndex: -1, onKeyDown: (e) => {
            if (e.nativeEvent.code === 'Escape') {
                onRequestClose?.();
                return;
            }
            if (divRef.current && e.nativeEvent.code === 'Tab') {
                scopeTab(divRef.current, e);
                return;
            }
        }, ref: (el) => {
            if (el) {
                divRef.current = el;
            }
            contentRef?.(el);
        }, "data-hook": dataHook, "data-transition-status": transitionStatus, className: st(classes.root, {
            exited: transitionStatus === 'exited',
            overlay,
            appendTo,
        }, ...[className, isOpen ? 'cairo-sliding-modal-is-open' : undefined]), role: "presentation", style: style, "aria-modal": undefined }, children));
}
//# sourceMappingURL=SlidingModal.js.map