import { KeyboardEvent, MouseEvent } from 'react';

export type JumboEmojiClickHandler = (body: string, event: MouseEvent<HTMLElement> | KeyboardEvent<HTMLElement>) => void;

export function getJumboEmojiInteractionProps({
  body,
  isJumboEmoji,
  onJumboEmojiClick,
}: {
  body: string;
  isJumboEmoji: boolean;
  onJumboEmojiClick?: JumboEmojiClickHandler;
}) {
  if (!isJumboEmoji || !onJumboEmojiClick) {
    return {};
  }

  const activate = (event: MouseEvent<HTMLElement> | KeyboardEvent<HTMLElement>) => {
    if ('key' in event) {
      if (event.key !== 'Enter' && event.key !== ' ') return;
      event.preventDefault();
    }
    event.stopPropagation();
    onJumboEmojiClick(body, event);
  };

  return {
    role: 'button' as const,
    tabIndex: 0,
    title: 'Throw emoji confetti',
    onClick: activate,
    onKeyDown: activate,
  };
}