import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useContext, useRef } from 'react';
import BareButton from '../Button/BareButton';
import Drawer from '../Drawer';
import Flex from '../Flex';
import Icon, { registerIcon } from '../Icon';
import * as arrowLeftIcon from '../Icon/icons/arrow-left.icon';
import Text from '../Text';
import { useConsolidatedRef, useDirection, useElement, useEscape, useFocusTrap, useI18n, useTheme, useUID } from '../../hooks';
import Configuration from '../Configuration/Configuration';
import AppShellContext from './AppShellContext';
import { StyledDrawerWrapper, StyledDrawerBackButton, StyledDrawerHeading, StyledDrawerListContainer } from './Drawer.styles';
import { navContrastColors } from './style-utils';
registerIcon(arrowLeftIcon);
export default ({ content, header, onDrawerOpen, onDrawerClose, drawerOpen, setDrawerOpen }) => {
    const t = useI18n();
    const theme = useTheme();
    const { focusedImperatively } = useContext(AppShellContext);
    const { start } = useDirection();
    const returnFocusRef = useRef();
    const [drawerEl, setDrawerEl] = useElement();
    const drawerRef = useConsolidatedRef(setDrawerEl);
    const backButtonRef = useRef(null);
    const headerId = useUID();
    useEscape(() => {
        setDrawerOpen(false);
    }, drawerEl, [drawerEl]);
    useFocusTrap(drawerRef);
    const { foreground, interactive, urgent } = navContrastColors(theme);
    const navTheme = {
        base: {
            palette: {
                'primary-background': theme.components['app-shell'].nav['background-color'],
                'foreground-color': foreground,
                interactive,
                urgent
            }
        }
    };
    return (_jsx(Configuration, { theme: navTheme, portalTarget: drawerEl ?? undefined, children: _jsxs(Drawer, { role: 'dialog', "aria-labelledby": headerId, as: StyledDrawerWrapper, position: 'fixed', placement: start, open: drawerOpen, nullWhenClosed: true, onBeforeOpen: () => {
                returnFocusRef.current = document.activeElement ?? undefined;
            }, onAfterOpen: () => {
                if (backButtonRef.current && document.activeElement !== backButtonRef.current) {
                    focusedImperatively.current = true;
                    backButtonRef.current.focus();
                }
                onDrawerOpen?.();
            }, onAfterClose: () => {
                onDrawerClose?.();
                returnFocusRef.current?.focus();
            }, onOuterClick: () => setDrawerOpen(false), ref: drawerRef, children: [_jsxs(Flex, { as: StyledDrawerHeading, container: { alignItems: 'center' }, children: [_jsx(BareButton, { as: StyledDrawerBackButton, ref: backButtonRef, onClick: () => setDrawerOpen(false), "aria-label": t('close_noun', [header]), children: _jsx(Icon, { name: `arrow-${start}` }) }), _jsx(Text, { variant: 'h2', id: headerId, children: header })] }), _jsx(Flex, { as: StyledDrawerListContainer, container: { direction: 'column' }, "aria-labelledby": headerId, children: content })] }) }));
};
//# sourceMappingURL=Drawer.js.map