import { Keyboard, KeyboardEventCode } from '@vev/utils';
import React from 'react';
import { SilkeIcon, SilkeIcons } from '../silke-icon';

import styles from './silke-shortcut-button.scss';

export type SilkeShortcutButtonProps = {
  label: string;
  icon: SilkeIcons;
  shortcut?: KeyboardEventCode[];
  compressed?: boolean;
  inverted?: boolean;
  centered?: boolean;
  hidden?: boolean;
  suffix?: React.ReactNode;
  onClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;
};

export function SilkeShortcutButton({
  label,
  icon,
  shortcut,
  compressed,
  inverted,
  centered,
  hidden,
  suffix,
  onClick,
}: SilkeShortcutButtonProps) {
  const hasShortcut = shortcut && shortcut.length > 0;

  return (
    <button
      type="button"
      className={styles.wrapper}
      data-compressed={compressed}
      data-inverted={inverted}
      data-centered={centered}
      data-hidden={hidden}
      onClick={onClick}
    >
      <div className={styles.background} />

      <span className={styles.icon}>
        <SilkeIcon icon={icon} />
      </span>

      {!compressed && <span className={styles.label}>{label}</span>}

      {!compressed && hasShortcut && (
        <div className={styles.shortcut}>
          {shortcut.map((s) => (
            <span key={s} className={styles.key}>
              {Keyboard.getFormatted(s).join(' + ')}
            </span>
          ))}
        </div>
      )}
      {!compressed && suffix && <div className={styles.shortcut}>{suffix}</div>}
    </button>
  );
}

SilkeShortcutButton.displayName = 'SilkeShortcutButton';