'use strict';

var tslib_es6 = require('./tslib.es6-cjs.js');
var React = require('react');
var classnames = require('classnames');
var DrawerRoot = require('./DrawerRoot-cjs.js');

var styles = {"backdrop":"Qf3IFhKJwQ0-","popup":"_868PDAA3U2M-","content":"eKuxReHyju8-","scrollArea":"_1I0eaFciaWo-","bottomFade":"BYEzqcZUGls-","spinning":"IJxq5fm5qdw-"};

const BOTTOM_THRESHOLD = 1;
const BottomSheetContext = React.createContext(null);
function BottomSheetRoot(_a) {
    var { children, defaultOpen, onOpenChange, open } = _a, rootProps = tslib_es6.__rest(_a, ["children", "defaultOpen", "onOpenChange", "open"]);
    const isControlled = open !== undefined;
    const [internalOpen, setInternalOpen] = React.useState(defaultOpen !== null && defaultOpen !== void 0 ? defaultOpen : false);
    const isOpen = isControlled ? open : internalOpen;
    const handleOpenChange = React.useCallback((nextOpen, eventDetails) => {
        if (!isControlled) {
            setInternalOpen(nextOpen);
        }
        onOpenChange === null || onOpenChange === void 0 ? void 0 : onOpenChange(nextOpen, eventDetails);
    }, [isControlled, onOpenChange]);
    return (React.createElement(BottomSheetContext.Provider, { value: { isOpen } },
        React.createElement(DrawerRoot.DrawerRoot, Object.assign({}, rootProps, { defaultOpen: defaultOpen, onOpenChange: handleOpenChange, open: open }), children)));
}
const BottomSheetPopup = React.forwardRef(function BottomSheetPopup(_a, ref) {
    var { children, className, initialFocus, finalFocus } = _a, popupProps = tslib_es6.__rest(_a, ["children", "className", "initialFocus", "finalFocus"]);
    const scrollAreaRef = React.useRef(null);
    const [showBottomFade, setShowBottomFade] = React.useState(false);
    const bottomSheetContext = React.useContext(BottomSheetContext);
    const isOpen = bottomSheetContext === null || bottomSheetContext === void 0 ? void 0 : bottomSheetContext.isOpen;
    const syncBottomFade = React.useCallback(() => {
        const node = scrollAreaRef.current;
        if (!node)
            return;
        const hasOverflow = node.scrollHeight > node.clientHeight;
        const isAtBottom = node.scrollTop + node.clientHeight >=
            node.scrollHeight - BOTTOM_THRESHOLD;
        const nextShowBottomFade = hasOverflow && !isAtBottom;
        setShowBottomFade(nextShowBottomFade);
    }, []);
    const scheduleFadeUpdate = React.useCallback(() => {
        syncBottomFade();
        let firstAnimationFrame = 0;
        let secondAnimationFrame = 0;
        firstAnimationFrame = window.requestAnimationFrame(() => {
            syncBottomFade();
            secondAnimationFrame = window.requestAnimationFrame(() => {
                syncBottomFade();
            });
        });
        return () => {
            window.cancelAnimationFrame(firstAnimationFrame);
            window.cancelAnimationFrame(secondAnimationFrame);
        };
    }, [syncBottomFade]);
    React.useLayoutEffect(() => {
        if (isOpen === false) {
            setShowBottomFade(false);
            return;
        }
        return scheduleFadeUpdate();
    }, [isOpen, scheduleFadeUpdate]);
    React.useEffect(() => {
        const node = scrollAreaRef.current;
        if (!node || typeof ResizeObserver === "undefined")
            return;
        const resizeObserver = new ResizeObserver(syncBottomFade);
        resizeObserver.observe(node);
        return () => {
            resizeObserver.disconnect();
        };
    }, [syncBottomFade]);
    return (React.createElement(DrawerRoot.DrawerPortal, null,
        React.createElement(DrawerRoot.DrawerBackdrop, { className: styles.backdrop }),
        React.createElement(DrawerRoot.DrawerPopup, Object.assign({}, popupProps, { ref: ref, className: classnames(styles.popup, className), initialFocus: initialFocus, finalFocus: finalFocus }),
            React.createElement("div", { className: styles.scrollArea, onScroll: syncBottomFade, ref: scrollAreaRef }, children),
            showBottomFade ? (React.createElement("div", { "aria-hidden": "true", className: styles.bottomFade })) : null)));
});
const BottomSheetContent = React.forwardRef(function BottomSheetContent(_a, ref) {
    var { children, className } = _a, contentProps = tslib_es6.__rest(_a, ["children", "className"]);
    return (React.createElement(DrawerRoot.DrawerContent, Object.assign({}, contentProps, { ref: ref, className: classnames(styles.content, className) }), children));
});
const BottomSheetComponent = React.forwardRef(function BottomSheet(_a, ref) {
    var { children, className, initialFocus, finalFocus, open, defaultOpen, onOpenChange } = _a, contentProps = tslib_es6.__rest(_a, ["children", "className", "initialFocus", "finalFocus", "open", "defaultOpen", "onOpenChange"]);
    return (React.createElement(BottomSheetRoot, { open: open, defaultOpen: defaultOpen, onOpenChange: onOpenChange },
        React.createElement(BottomSheetPopup, { initialFocus: initialFocus, finalFocus: finalFocus },
            React.createElement(BottomSheetContent, Object.assign({}, contentProps, { ref: ref, className: className }), children))));
});
const BottomSheet = Object.assign(BottomSheetComponent, {
    Root: BottomSheetRoot,
    Popup: BottomSheetPopup,
    Content: BottomSheetContent,
});

exports.BottomSheet = BottomSheet;
