import React, { useCallback } from 'react';
import {
  StyleSheet,
  TouchableOpacity,
  Image,
  ImageStyle,
  ViewStyle,
  View,
  TextStyle,
} from 'react-native';
import { abbrevNum } from '../../utils';
import { UserReactionState, useStyles } from '../../hooks';
import { ComponentStyleProp, LLComponentStyleFn } from '../../types';
import { LLText } from '../LLText';

export type LLUserReactionCountDetailStyles = {
  container: ViewStyle;
  reactionIcon: ImageStyle;
  reactionCountText: TextStyle;
  selfReactionContainer: ViewStyle;
  selfReactionCountText: TextStyle;
};

export type LLUserReactionCountDetailProps =
  ComponentStyleProp<LLUserReactionCountDetailStyles> & {
    reaction: UserReactionState;
    onPress: (reactionId: string) => void;
  };

export const LLUserReactionCountDetail = ({
  reaction,
  styles: stylesProp,
  onPress,
}: LLUserReactionCountDetailProps) => {
  const reactionItemStyles = useStyles({
    componentStylesFn: getUserReactionCountDetailStyles,
    stylesProp,
  });
  const onItemPress = useCallback(() => {
    onPress(reaction.reaction_id);
  }, [onPress]);

  return (
    <TouchableOpacity
      key={reaction.reaction_id}
      onPress={onItemPress}
      accessibilityLabel="Reaction item"
    >
      <View
        style={[
          reactionItemStyles.container,
          reaction.self_reacted_user_reaction_id &&
            reactionItemStyles.selfReactionContainer,
        ]}
      >
        <Image
          style={reactionItemStyles.reactionIcon}
          source={{ uri: reaction.imageSrc }}
        />
        <LLText
          style={[
            reactionItemStyles.reactionCountText,
            reaction.self_reacted_user_reaction_id &&
              reactionItemStyles.selfReactionCountText,
          ]}
        >
          {abbrevNum(reaction.count)}
        </LLText>
      </View>
    </TouchableOpacity>
  );
};

const getUserReactionCountDetailStyles: LLComponentStyleFn<
  LLUserReactionCountDetailStyles
> = ({ theme }) =>
  StyleSheet.create({
    container: {
      flexDirection: 'row',
      alignItems: 'center',
      backgroundColor: theme.popoverBackground,
      marginHorizontal: 5,
      marginBottom: 4,
      paddingHorizontal: 5,
      paddingVertical: 2,
      borderRadius: 4,
    },
    reactionIcon: {
      height: 22,
      width: 22,
    },
    reactionCountText: {
      marginLeft: 5,
      color: theme.text,
      fontSize: 11,
      fontWeight: 'bold',
    },
    selfReactionContainer: {
      backgroundColor: theme.primaryButtonBackground,
    },
    selfReactionCountText: {
      color: '#000000',
    },
  });