import React, { useCallback } from 'react';
import { StyleSheet, TouchableOpacity, Image, ImageStyle } from 'react-native';
import { IReactionEmoji } from '@livelike/javascript';
import { ComponentStyleProp, LLComponentStyleFn } from '../../types';
import { useStyles } from '../../hooks';

export type LLReactionPickerItemStyles = {
  reactionIcon: ImageStyle;
};

export type LLReactionPickerItemProps =
  ComponentStyleProp<LLReactionPickerItemStyles> & {
    reaction: IReactionEmoji;
    onPress: (id: string) => void;
  };

export const LLReactionPickerItem = ({
  reaction,
  styles: stylesProp,
  onPress,
}: LLReactionPickerItemProps) => {
  const reactionItemStyles = useStyles({
    componentStylesFn: getReactionItemStyles,
    stylesProp,
  });
  const onItemPress = useCallback(() => {
    onPress(reaction.id);
  }, [onPress]);

  return (
    <TouchableOpacity onPress={onItemPress} accessibilityLabel="Reaction item">
      <Image
        style={reactionItemStyles.reactionIcon}
        source={{ uri: reaction.file }}
      />
    </TouchableOpacity>
  );
};

const getReactionItemStyles: LLComponentStyleFn<LLReactionPickerItemStyles> = ({
  theme,
}) =>
  StyleSheet.create({
    reactionIcon: {
      height: 22,
      width: 22,
      marginHorizontal: 8,
      marginVertical: 10,
    },
  });