import React, {useMemo, useCallback, ReactElement} from 'react';
import {View} from 'react-native';
import {useTranslation} from 'react-i18next';
import {IconMoodPlus} from '@tabler/icons-react-native';
import {Typography, Pressable} from '@components/_core';
import {useTheme} from '@shared/theme';

import styles from './styles';

export interface ReactionProps {
  reactions: Array<{
    emoji: string;
    count: number;
    isLoggedUserReaction?: boolean;
  }>;
  onReactionPress?: (emoji: string) => void;
  onToggleReactionsBottomSheet?: () => void;
  onToggleReactionsListDrawer?: (reaction: string) => void;
  disabled?: boolean;
}

export const Reactions: React.FC<ReactionProps> = ({
  reactions,
  onReactionPress,
  onToggleReactionsBottomSheet,
  onToggleReactionsListDrawer,
  disabled,
}): ReactElement => {
  const {t} = useTranslation();
  const {theme, iconSizes} = useTheme();
  const isThereReactions = reactions.find(reaction => reaction.count > 0);

  const onDefaultReactionPress = () => {
    onReactionPress?.('👍');
  };

  const onHandleReactionPress = useCallback(
    (emoji: string) => () => {
      onReactionPress?.(emoji);
    },
    [onReactionPress],
  );

  const onShowReactionsSummary = useCallback(
    (emoji: string) => () => {
      if (isThereReactions) {
        onToggleReactionsListDrawer?.(emoji);
      }
    },
    [isThereReactions, onToggleReactionsListDrawer],
  );

  const renderReactions = useMemo(
    () =>
      reactions.map(reaction => (
        <Pressable
          key={reaction.emoji}
          onPress={onHandleReactionPress(reaction.emoji)}
          onLongPress={onShowReactionsSummary(reaction.emoji)}
          disabled={disabled}
          style={[
            styles.reactionContainer,
            styles.reactionContainerWidth,
            disabled && styles.disabled,
            {backgroundColor: theme.background.layout.default},
            reaction.isLoggedUserReaction && {
              borderColor: theme.button.background.primary.hover,
              backgroundColor: theme.action.background.brand.hover,
            },
          ]}>
          <Typography variant="xs">{reaction.emoji}</Typography>
          <Typography weight="semiBold" variant="xs">
            {reaction.count}
          </Typography>
        </Pressable>
      )),
    [
      reactions,
      onHandleReactionPress,
      onShowReactionsSummary,
      theme.background.layout.default,
      theme.button.background.primary.hover,
      theme.action.background.brand.hover,
      disabled,
    ],
  );

  return (
    <View style={styles.container}>
      {reactions.length === 0 && (
        <Pressable
          onPress={onDefaultReactionPress}
          disabled={disabled}
          style={[
            styles.reactionContainer,
            {backgroundColor: theme.background.layout.default},
            disabled && styles.disabled,
          ]}>
          <Typography variant="xs">{'👍'}</Typography>
          <Typography weight="semiBold" variant="xs">
            {0}
          </Typography>
        </Pressable>
      )}
      {renderReactions}
      <Pressable
        style={[
          styles.reactionContainer,
          styles.addingMoreIcon,
          {backgroundColor: theme.background.layout.default},
          disabled && styles.disabled,
        ]}
        onPress={onToggleReactionsBottomSheet}
        disabled={disabled}>
        <IconMoodPlus color={theme.text.neutral.default} size={iconSizes.x5} />
      </Pressable>
      {isThereReactions && (
        <Pressable
          onPress={onShowReactionsSummary(reactions[0].emoji)}
          disabled={disabled}
          style={disabled && styles.disabled}>
          <Typography
            weight="semiBold"
            color={theme.text.neutral.brand}
            variant="xs">
            {t('general.see_all')}
          </Typography>
        </Pressable>
      )}
    </View>
  );
};