import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
import { useCallback } from 'react';
import { Shortcut } from 'shortcuts';
import Flex from '../Flex';
import { Keyboard } from '../Badges';
import Text from '../Text';
import { useI18n, useModalManager, useShortcutManager } from '../../hooks';
import Modal from '../Modal';
import Table from '../Table';
// bindings structure is different for table shortcuts to support multiple bindings
// there are no such bindings in shortcut manager yet, but this may be moved there in future
const tableKeyBindings = {
    NavigateCells: {
        defaultKeyBinding: ['Up', 'Down', 'Left', 'Right'],
        keyBinding: ['Up', 'Down', 'Left', 'Right']
    },
    EnterTabNav: {
        defaultKeyBinding: ['Enter'],
        keyBinding: ['Enter']
    },
    TabNavigation: {
        defaultKeyBinding: ['Tab', 'Shift+Tab'],
        keyBinding: ['Tab', 'Shift+Tab']
    },
    RestoreGridNav: {
        defaultKeyBinding: ['Esc'],
        keyBinding: ['Esc']
    }
};
export const KeyboardShortcut = ({ keyBinding }) => {
    return (_jsx(Flex, { container: { gap: 0.5, alignItems: 'center' }, children: Shortcut.shortcut2accelerator(keyBinding)
            .split('+')
            .map(key => (_jsx(Keyboard, { keyName: key }, key))) }));
};
const GeneralKeyboardShortcuts = ({ columns }) => {
    const t = useI18n();
    const bindings = useShortcutManager();
    const tableData = Object.entries(bindings).map(([actionId, { keyBinding }]) => {
        return {
            id: actionId,
            action: t(`shortcut_${actionId}`),
            command: _jsx(KeyboardShortcut, { keyBinding: keyBinding })
        };
    });
    return _jsx(Table, { title: t('general'), data: tableData, columns: columns });
};
const TableKeyboardShortcuts = ({ columns }) => {
    const t = useI18n();
    const tableData = Object.entries(tableKeyBindings).map(([actionId, { keyBinding }]) => {
        return {
            id: actionId,
            action: t(`shortcut_${actionId}`),
            command: (_jsx(Flex, { container: { gap: 0.5, alignItems: 'center' }, children: keyBinding.map((singleBinding, index) => (_jsxs(_Fragment, { children: [_jsx(KeyboardShortcut, { keyBinding: singleBinding }), index < keyBinding.length - 1 && _jsx(Text, { children: "," })] }))) }))
        };
    });
    return _jsx(Table, { title: t('tables_and_grids'), data: tableData, columns: columns });
};
const KeyboardShortcutsModal = () => {
    const t = useI18n();
    const columns = [
        { renderer: 'action', label: t('action') },
        { renderer: 'command', label: t('key_combination') }
    ];
    return (_jsx(Modal, { heading: t('keyboard_commands'), children: _jsxs(Flex, { container: { direction: 'column', gap: 4 }, children: [_jsx(GeneralKeyboardShortcuts, { columns: columns }), _jsx(TableKeyboardShortcuts, { columns: columns })] }) }));
};
export const useKeyboardCommands = () => {
    const { create: createModal } = useModalManager();
    return useCallback(() => {
        createModal(KeyboardShortcutsModal, {}, { minimizable: true });
    }, [createModal]);
};
export default useKeyboardCommands;
//# sourceMappingURL=KeyboardCommands.js.map