import React from 'react';
import { Text, View, FlatList } from 'react-native';
import { useSelector } from 'react-redux';

import { useTheme } from '../../theme';
import { IReaction, IApplicationState } from '../../definitions';
import Avatar from '../Avatar';
import styles from './styles';

const UsersList = ({ tabLabel }: { tabLabel: IReaction }): React.ReactElement => {
	const { colors } = useTheme();
	const useRealName = useSelector((state: IApplicationState) => state.settings.UI_Use_Real_Name);

	const { emoji, usernames, names } = tabLabel;
	const users =
		names?.length > 0
			? usernames.map((username, index) => ({ username, name: names[index] }))
			: usernames.map(username => ({ username, name: '' }));

	return (
		<FlatList
			data={users}
			contentContainerStyle={styles.listContainer}
			ListHeaderComponent={
				<View style={styles.emojiNameContainer}>
					<Text style={[styles.emojiName, { color: colors.auxiliaryText }]} testID='usersListEmojiName'>
						{emoji}
					</Text>
				</View>
			}
			renderItem={({ item }) => (
				<View style={styles.listItemContainer} testID='userItem'>
					<Avatar text={item.username} size={36} />
					<View style={styles.textContainer}>
						<Text style={[styles.usernameText, { color: colors.bodyText }]} numberOfLines={1}>
							{useRealName && item.name ? item.name : item.username}
						</Text>
					</View>
				</View>
			)}
			keyExtractor={item => item.username}
			testID={`usersList-${emoji}`}
		/>
	);
};

export default UsersList;