import {memo, useMemo} from 'react';
import {View} from 'react-native';
import {ListRow, Typography} from '@components';
import {MessageInfoReadState} from '@modules/chats/interfaces';
import {getHumanizedDateWithTime} from '@modules/chats/utils';
import {useTheme} from '@shared/theme';

import {styles} from './styles';

interface Props {
  item: MessageInfoReadState;
  first?: boolean;
  last?: boolean;
}

function ListUserItem({item, first, last}: Props) {
  const {theme} = useTheme();
  const {date, time} = useMemo(
    () => getHumanizedDateWithTime(item.read_at),
    [item.read_at],
  );

  const member = item.user?.user.hu_data?.member;

  if (!member) {
    return null;
  }

  const fullName = `${member.first_name} ${member.last_name}`;

  return (
    <ListRow
      style={[
        styles.container,
        {borderColor: theme.border.neutral.default},
        first && styles.firstItem,
        last && styles.lastItem,
      ]}>
      <View style={styles.avatarWithName}>
        <ListRow.Avatar
          name={fullName}
          withAuthHeader={true}
          url={member.picture_asset_url}
        />
        <ListRow.Title size={'xs'} style={styles.name} title={fullName} />
      </View>
      <View style={styles.dateTimeContainer}>
        <Typography color={theme.text.neutral.lighter} variant="xxs">
          {date + ' '}
        </Typography>
        <Typography color={theme.text.neutral.default} variant="xxs">
          {time}
        </Typography>
      </View>
    </ListRow>
  );
}
export default memo(ListUserItem);
