import { requireNativeView } from 'expo';
import type * as React from 'react';
import type {
  EmojiSheetNativeViewProps,
  EmojiSheetViewProps,
} from './EmojiSheetModule.types';

const NativeView: React.ComponentType<EmojiSheetNativeViewProps> =
  requireNativeView('EmojiSheet');

export default function EmojiSheetView({
  onEmojiSelected,
  onDismiss,
  onOpen,
  theme,
  translations,
  layoutDirection,
  categoryBarPosition,
  columns,
  emojiSize,
  recentLimit,
  showSearch,
  showRecents,
  enableSkinTones,
  enableHaptics,
  enableAnimations,
  excludeEmojis,
  ...rest
}: EmojiSheetViewProps) {
  return (
    <NativeView
      {...rest}
      theme={typeof theme === 'string' ? theme : undefined}
      layoutDirection={layoutDirection}
      categoryBarPosition={categoryBarPosition}
      columns={columns}
      emojiSize={emojiSize}
      recentLimit={recentLimit}
      showSearch={showSearch}
      showRecents={showRecents}
      enableSkinTones={enableSkinTones}
      enableHaptics={enableHaptics}
      enableAnimations={enableAnimations}
      excludeEmojis={excludeEmojis}
      searchPlaceholder={translations?.searchPlaceholder}
      noResultsText={translations?.noResultsText}
      categoryNames={translations?.categoryNames}
      onEmojiSelected={({ nativeEvent }) => {
        onEmojiSelected(nativeEvent.emoji, nativeEvent.name, nativeEvent.id);
      }}
      onDismiss={onDismiss ? () => onDismiss() : undefined}
      onOpen={onOpen ? () => onOpen() : undefined}
    />
  );
}