import { Keyboard, KeyboardEventCode } from '@vev/utils';
import React from 'react';
import { SilkeIconDefinitions } from '../../icons';
import { BoxDivProps, SilkeBox } from '../silke-box';
import { SilkeIcon } from '../silke-icon';
import styles from './silke-tooltip.scss';

type IconSymbol = keyof typeof SilkeIconDefinitions;

function isShortcutIcon(key: string) {
  return SilkeIconDefinitions[key as IconSymbol] !== undefined;
}

export const SilkeShortcuts = ({
  shortcuts,
  style,
  ...rest
}: { shortcuts?: KeyboardEventCode[] } & BoxDivProps) =>
  shortcuts ? (
    <SilkeBox gap="s" style={style}>
      {shortcuts.map((s, i) => (
        <SilkeBox key={i}>
          <SilkeBox
            className={styles.shortcut}
            rounded="tiny"
            bg="neutral-0"
            pad="xs"
            vAlign="center"
            flex
            gap="xs"
            {...rest}
          >
            {Keyboard.getFormatted(s).map((keys, i) =>
              keys
                .split(' ')
                .map((f, index) =>
                  isShortcutIcon(f) ? (
                    <SilkeIcon icon={f as IconSymbol} key={i + index} />
                  ) : (
                    <span key={i + index}>{f}</span>
                  ),
                ),
            )}
          </SilkeBox>
        </SilkeBox>
      ))}
    </SilkeBox>
  ) : null;