import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
import { forwardRef } from 'react';
import styled, { css } from 'styled-components';
import { defaultThemeProp } from '../../theme';
import useOS from '../../hooks/useOS';
import { useTestIds } from '../../hooks';
import { withTestIds } from '../../utils';
import VisuallyHiddenText from '../VisuallyHiddenText';
import { getKeyboardTestIds } from './Badges.test-ids';
const osxKeyMapper = {
    Command: '⌘',
    Alt: '⌥',
    Option: '⌥',
    Control: '⌃',
    Return: (_jsxs(_Fragment, { children: [_jsx("span", { "aria-hidden": true, children: "\u21B5" }), _jsx(VisuallyHiddenText, { children: "Return" })] })),
    Enter: (_jsxs(_Fragment, { children: [_jsx("span", { "aria-hidden": true, children: "\u21B5" }), _jsx(VisuallyHiddenText, { children: "Enter" })] })),
    Delete: (_jsxs(_Fragment, { children: [_jsx("span", { "aria-hidden": true, children: "Del" }), _jsx(VisuallyHiddenText, { children: "Delete" })] })),
    CommandOrControl: '⌘'
};
const windowsKeyMapper = {
    Control: 'Ctrl',
    Alt: 'Alt',
    Option: 'Alt',
    Meta: (_jsxs(_Fragment, { children: [_jsx("span", { "aria-hidden": true, children: "\u229E" }), _jsx(VisuallyHiddenText, { children: "Windows" })] })),
    Command: (_jsxs(_Fragment, { children: [_jsx("span", { "aria-hidden": true, children: "\u229E" }), _jsx(VisuallyHiddenText, { children: "Windows" })] })),
    Backspace: 'Backspace',
    CommandOrControl: 'Ctrl'
};
const generalKeyMapper = {
    'Page up': (_jsxs(_Fragment, { children: [_jsx("span", { "aria-hidden": true, children: "Pg up" }), _jsx(VisuallyHiddenText, { children: "Page up" })] })),
    'Page down': (_jsxs(_Fragment, { children: [_jsx("span", { "aria-hidden": true, children: "Pg dn" }), _jsx(VisuallyHiddenText, { children: "Page down" })] })),
    Ins: 'Insert',
    Shift: (_jsxs(_Fragment, { children: [_jsx("span", { "aria-hidden": true, children: "\u21E7" }), _jsx(VisuallyHiddenText, { children: "Shift" })] }))
};
export const StyledKeyboard = styled.kbd(({ theme: { base, components: { text: { primary }, badges: { keyboard } } } }) => {
    return css `
      background-color: ${keyboard['background-color']};
      color: ${base.palette['foreground-color']};
      display: inline-block;
      position: relative;
      font-family: ${base['font-family']};
      font-weight: ${primary['font-weight']};
      overflow: hidden;
      white-space: nowrap;
      padding: 0.125rem;
      border: 0.0125rem solid ${keyboard['border-color']};
      border-radius: calc(${base['border-radius']} / 4);
      text-transform: capitalize;
      text-align: center;
      min-width: 1.25rem;
      height: 1.25rem;
      text-overflow: ellipsis;
      line-height: 1rem;
      inset-block-start: calc(1.25rem / 4 - 0.125rem);
    `;
});
StyledKeyboard.defaultProps = defaultThemeProp;
export default withTestIds(forwardRef(function Keyboard({ testId, keyName, ...restProps }, ref) {
    const { windows: isWindows } = useOS();
    const testIds = useTestIds(testId, getKeyboardTestIds);
    return (_jsx(StyledKeyboard, { "data-testid": testIds.root, ...restProps, ref: ref, children: (isWindows && windowsKeyMapper[keyName]) ||
            osxKeyMapper[keyName] ||
            generalKeyMapper[keyName] ||
            keyName }));
}), getKeyboardTestIds);
//# sourceMappingURL=Keyboard.js.map