import React, { useState } from 'react';
import { Drawer as VaulDrawer } from 'vaul';
import { classes, st } from './Drawer.st.css.js';
import { DATA_HOOKS } from './Drawer.constants';
import { ZIndex } from '../common/ZIndex';
const Drawer = ({ open, backdrop = true, renderBackdrop = true, resizable = true, margin = true, onClose, role = 'dialog', ariaLabelledBy, children, snapPoints, dismissible = true, dataHook, zIndex = ZIndex.popover, scrollable = true, repositionInputs = true, }) => {
    const [snap, setSnap] = useState(snapPoints?.[0] ?? null);
    const snapProps = snapPoints?.length
        ? {
            snapPoints,
            activeSnapPoint: snap,
            setActiveSnapPoint: setSnap,
            fadeFromIndex: 0,
        }
        : {};
    return (React.createElement("div", { "data-hook": dataHook },
        React.createElement(VaulDrawer.Root, { open: open, onOpenChange: onClose, container: typeof window !== 'undefined' ? window.document.body : null, handleOnly: true, repositionInputs: repositionInputs, ...snapProps },
            React.createElement(VaulDrawer.Portal, null,
                renderBackdrop && (React.createElement(VaulDrawer.Overlay, { "data-hook": DATA_HOOKS.OVERLAY, className: st(classes.overlay, {
                        backdrop,
                    }), style: { zIndex } })),
                React.createElement(VaulDrawer.Content, { "data-hook": DATA_HOOKS.CONTENT, "aria-modal": "true", "aria-labelledby": ariaLabelledBy, role: role, className: st(classes.content, { margin }), onInteractOutside: dismissible ? undefined : e => e.preventDefault(), style: { zIndex } },
                    React.createElement(VaulDrawer.Title, { className: classes.title }),
                    resizable && (React.createElement(VaulDrawer.Handle, { className: classes.handle, "data-hook": DATA_HOOKS.HANDLE })),
                    scrollable ? (React.createElement("div", { className: st(classes.contentWrapper, { margin }) }, children)) : (children))))));
};
Drawer.displayName = 'Drawer';
export default Drawer;
//# sourceMappingURL=Drawer.js.map