import React, {memo, useCallback} from 'react';
import {useTranslation} from 'react-i18next';
import {ListItem, ListItemProps} from '@components';
import {ChatUser} from '@modules/chats/interfaces';
import {getUserAvatar} from '@modules/chats/utils';
import {persistedUserId} from '@services/localStorage';

import {styles} from './styles';

interface Props extends Omit<ListItemProps, 'onItemPress' | 'title'> {
  user: ChatUser;
  onItemPress: (user: ChatUser) => void;
  description?: string;
}

function UserListItemComponent({
  user,
  onItemPress,
  description,
  ...props
}: Props) {
  const {t} = useTranslation();
  const avatar = getUserAvatar(user.hu_data.member, persistedUserId!);

  const handleItemPress = useCallback(() => {
    onItemPress(user);
  }, [onItemPress, user]);

  return (
    <ListItem
      title={avatar.title}
      description={description}
      avatar={avatar}
      onItemPress={handleItemPress}
      style={styles.listItem}
      accessibilityLabel={`${t('users.user')}: ${avatar.title}`}
      {...props}
    />
  );
}

export const UserListItem = memo(UserListItemComponent);