import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import React from 'react';
import { useTheme } from '../../theme';
const DEFAULT_WIDTH = 'w-80';
export const Drawer = ({ children, isOpen, onClose, side = 'left', widthClassName = DEFAULT_WIDTH, className, overlay = true, closeLabel = 'Close panel', role = 'complementary' }) => {
    const theme = useTheme();
    const handleOverlayClick = React.useCallback(() => {
        if (onClose) {
            onClose();
        }
    }, [onClose]);
    React.useEffect(() => {
        if (!isOpen || !onClose) {
            return;
        }
        const handleKeyDown = (event) => {
            if (event.key === 'Escape') {
                onClose();
            }
        };
        window.addEventListener('keydown', handleKeyDown);
        return () => {
            window.removeEventListener('keydown', handleKeyDown);
        };
    }, [isOpen, onClose]);
    const containerClasses = [
        theme.drawer.container,
        side === 'left' ? theme.drawer.containerSideLeft : theme.drawer.containerSideRight,
        isOpen ? 'pointer-events-auto' : 'pointer-events-none'
    ].filter(Boolean).join(' ');
    const overlayClasses = [
        theme.drawer.overlay,
        overlay && isOpen ? theme.drawer.overlayVisible : ''
    ].filter(Boolean).join(' ');
    const panelClasses = [
        theme.drawer.panel,
        side === 'left' ? theme.drawer.panelHiddenLeft : theme.drawer.panelHiddenRight,
        isOpen ? theme.drawer.panelVisible : '',
        widthClassName,
        className
    ].filter(Boolean).join(' ');
    return (_jsxs("div", { className: containerClasses, "data-open": isOpen, "data-side": side, children: [overlay && (_jsx("div", { className: overlayClasses, "aria-hidden": 'true', onClick: handleOverlayClick })), _jsxs("aside", { className: panelClasses, role: role, children: [typeof onClose === 'function' && (_jsx("button", { type: 'button', onClick: onClose, className: theme.drawer.closeButton, "aria-label": closeLabel, children: _jsx("span", { "aria-hidden": 'true', className: theme.drawer.closeIcon, children: "\u00D7" }) })), children] })] }));
};
export default Drawer;
