import React from 'react';
import { Text, View, FlatList, useWindowDimensions } from 'react-native';
import { useActionSheet } from '../ActionSheet';
import Emoji from '../message/Emoji';
import { useTheme } from '../../theme';
import { IReaction } from '../../definitions';
import { TGetCustomEmoji } from '../../definitions/IEmoji';
import I18n from '../../i18n';
import styles from './styles';
import { useAppSelector } from '../../lib/hooks';
import { calculatePadding } from './calculatePadding';
interface IAllReactionsListItemProps {
getCustomEmoji: TGetCustomEmoji;
item: IReaction;
}
interface IAllTabProps {
getCustomEmoji: TGetCustomEmoji;
tabLabel: IReaction;
reactions?: IReaction[];
}
const AllReactionsListItem = ({ item, getCustomEmoji }: IAllReactionsListItemProps) => {
const { colors } = useTheme();
const useRealName = useAppSelector(state => state.settings.UI_Use_Real_Name);
const username = useAppSelector(state => state.login.user.username);
const count = item.usernames.length;
let displayNames;
if (useRealName && item.names) {
displayNames = item.names
.slice(0, 3)
.map((name, index) => (item.usernames[index] === username ? I18n.t('you') : name))
.join(', ');
} else {
displayNames = item.usernames
.slice(0, 3)
.map((otherUsername: string) => (username === otherUsername ? I18n.t('you') : otherUsername))
.join(', ');
}
if (count > 3) {
displayNames = `${displayNames} ${I18n.t('and_more')} ${count - 3}`;
} else {
displayNames = displayNames.replace(/,(?=[^,]*$)/, ` ${I18n.t('and')}`);
}
return (
{count === 1 ? I18n.t('1_person_reacted') : I18n.t('N_people_reacted', { n: count })}
{displayNames}
);
};
const AllTab = ({ reactions, getCustomEmoji }: IAllTabProps): React.ReactElement => {
const { height } = useWindowDimensions();
const paddingBottom = calculatePadding(height);
const { actionSheetSnapIndex } = useActionSheet();
return (
}
keyExtractor={item => item.emoji}
/>
);
};
export default AllTab;