import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { memo, useMemo } from 'react';
import styled, { css } from 'styled-components';
import { hideVisually, remToPx, stripUnit } from 'polished';
import { Shortcut } from 'shortcuts';
import { defaultThemeProp } from '../../theme';
import { focusHeadingOrContainer, tryCatch } from '../../utils';
import Button, { StyledButtonLink } from '../Button';
import Popover from '../Popover';
import Flex from '../Flex';
import { Keyboard } from '../Badges';
import Text from '../Text';
import Grid from '../Grid';
import { useI18n, useShortcutManager, useTheme, useUID } from '../../hooks';
const StyledSkipLinksItems = styled.div `
  & > ${StyledButtonLink} {
    display: block;
    margin-inline-start: 0;
  }
`;
export const StyledSkipLinks = styled(Popover)(props => {
    const { theme: { base: { spacing, 'z-index': zIndices } } } = props;
    return css `
    position: fixed;
    z-index: ${zIndices.max};
    overflow: auto;
    max-width: calc(100vw - 6 * ${spacing});
    max-height: calc(100vh - 6 * ${spacing});

    &:not(:focus-within) {
      z-index: -1;
      ${hideVisually}
    }
  `;
});
StyledSkipLinks.defaultProps = defaultThemeProp;
const StyledShortcuts = styled.div(({ theme }) => {
    return css `
    border-block-start: 0.0625rem solid ${theme.base.palette['border-line']};

    [role='listitem'] {
      display: contents;
    }
  `;
});
StyledShortcuts.defaultProps = defaultThemeProp;
const SkipLinks = memo(function SkipLinks({ items }) {
    const bindings = useShortcutManager();
    const t = useI18n();
    const shortcutHeadingId = useUID();
    const { base: { spacing } } = useTheme();
    const padding = useMemo(() => tryCatch(() => Number(stripUnit(remToPx(spacing))) * 3, () => 24), [spacing]);
    return (_jsxs(Flex, { as: StyledSkipLinks, portal: false, container: { direction: 'column' }, placement: 'bottom-end', target: {
            getBoundingClientRect: () => ({
                height: 0,
                width: 0,
                x: padding,
                y: padding,
                top: padding,
                bottom: padding,
                left: padding,
                right: padding
            })
        }, modifiers: [
            {
                name: 'placeAndContain',
                enabled: false
            },
            {
                name: 'offset',
                options: {
                    offset: [0, 0]
                }
            }
        ], "data-app-region": true, "aria-label": t('skip_navigation_menu_label'), children: [_jsx(Flex, { container: { direction: 'column', gap: 0.5, pad: 1 }, as: StyledSkipLinksItems, children: items.map(item => (_jsx(Button, { variant: 'link', onClick: () => focusHeadingOrContainer(document.querySelector(item.target.selector) ?? document, item.target.ariaLabel), children: item.label }, item.label))) }), Object.entries(bindings).length > 0 && (_jsxs(Flex, { container: { direction: 'column', gap: 1, pad: 1 }, as: StyledShortcuts, children: [_jsx(Text, { variant: 'h2', as: 'span', id: shortcutHeadingId, children: t('shortcuts') }), _jsx(Grid, { container: {
                            cols: 'auto minmax(0, 1fr)',
                            gap: 1,
                            alignItems: 'center'
                        }, role: 'list', "aria-labelledby": shortcutHeadingId, children: Object.entries(bindings).map(([actionId, { keyBinding }]) => {
                            return (_jsxs("div", { role: 'listitem', children: [_jsx(Text, { children: t(`shortcut_${actionId}`) }), _jsx(Flex, { container: { gap: 0.5 }, children: Shortcut.shortcut2accelerator(keyBinding)
                                            .split('+')
                                            .map(key => (_jsx(Keyboard, { keyName: key }, key))) })] }, actionId));
                        }) })] }))] }));
});
export default SkipLinks;
//# sourceMappingURL=SkipLinks.js.map