nomadmania-app/src/screens/InAppScreens/TravellersScreen/Components/SeriesRankingItem.tsx

import React from 'react';
import { Text, TouchableOpacity, View, Image, Dimensions } from 'react-native';
import * as FileSystem from 'expo-file-system';

import { AvatarWithInitials } from '../../../../components';

import { API_HOST } from 'src/constants';
import { getFontSize } from 'src/utils';
import { Colors } from 'src/theme';
import { SeriesRanking } from '../utils/types';
import { ProfileStyles, ScoreStyles } from './styles';
import { useConnection } from 'src/contexts/ConnectionContext';
import formatNumber from '../../TravelsScreen/utils/formatNumber';

import TickIcon from 'assets/icons/tick.svg';
import UNIcon from 'assets/icons/un_icon.svg';
import NMIcon from 'assets/icons/nm_icon.svg';
import ArrowIcon from 'assets/icons/arrow-bold.svg';

const SeriesRankingItem = React.memo(
  ({
    item,
    index,
    onPress
  }: {
    item: SeriesRanking;
    index: number;
    onPress: (userId: number) => void;
  }) => {
    const netInfo = useConnection();
    const isSmallScreen = Dimensions.get('window').width < 383;

    const avatarBaseUri = netInfo?.isInternetReachable
      ? API_HOST + item.avatar
      : `${FileSystem.documentDirectory}avatars/${item.user_id}.webp`;

    const flagBaseUri = (flag: string) =>
      netInfo?.isInternetReachable
        ? API_HOST + flag
        : `${FileSystem.documentDirectory}flags/${flag.split('/').pop()}`;

    return (
      <TouchableOpacity
        onPress={() => onPress(item.user_id)}
        style={[
          ProfileStyles.profileContainer,
          { backgroundColor: Colors.FILL_LIGHT, padding: 6, borderRadius: 8, marginBottom: 12 }
        ]}
      >
        <View style={[ProfileStyles.profileRoot, { marginBottom: 0 }]}>
          <View style={{ flexDirection: 'row' }}>
            <View
              style={{
                alignItems: 'center',
                justifyContent: 'center',
                width: index + 1 < 100 ? 26 : index + 1 < 1000 ? 38 : 50
              }}
            >
              <Text style={ScoreStyles.rankText}>{index + 1}</Text>
            </View>
            <View style={{ marginLeft: 4 }}>
              {item.avatar ? (
                <Image style={ProfileStyles.profileAvatar} source={{ uri: avatarBaseUri }} />
              ) : (
                <AvatarWithInitials
                  text={`${item.first_name[0] ?? ''}${item.last_name[0] ?? ''}`}
                  flag={flagBaseUri(item.flag1)}
                  size={48}
                />
              )}
            </View>
          </View>
          <View style={{ gap: 5, flex: 1 }}>
            <Text
              style={[ProfileStyles.profileFirstLastName, { fontSize: getFontSize(14), flex: 0 }]}
            >
              {item.first_name ?? ''} {item.last_name ?? ''}
            </Text>
            <View style={[ProfileStyles.profileDataContainer, { flex: 1 }]}>
              <View style={[ProfileStyles.profileDataWrapper, isSmallScreen ? { gap: 6 } : {}]}>
                <Text style={ProfileStyles.profileAge}>Age: {item.age ?? ''}</Text>
                <Image
                  source={{ uri: flagBaseUri(item.flag1) }}
                  style={ProfileStyles.countryFlag}
                />
                {item.flag2 && item.flag2 !== item.flag1 ? (
                  <Image
                    source={{ uri: flagBaseUri(item.flag2) }}
                    style={[ProfileStyles.countryFlag, { marginLeft: -15 }]}
                  />
                ) : null}
                <View style={[ProfileStyles.badgesWrapper, isSmallScreen ? { marginLeft: 4 } : {}]}>
                  {item.authenticated === 1 ? <TickIcon /> : null}
                  {item.badge_un === 1 ? <UNIcon /> : null}
                  {item.badge_nm === 1 ? <NMIcon /> : null}
                </View>
              </View>

              <View style={[ProfileStyles.rightScore, { flex: 1, justifyContent: 'flex-end' }]}>
                <Text
                  style={[
                    {
                      fontWeight: 'bold',
                      fontSize: isSmallScreen ? 12 : 16
                    },
                    item.recent_score_increase
                      ? { color: Colors.ORANGE }
                      : { color: Colors.DARK_BLUE }
                  ]}
                >
                  {isSmallScreen ? formatNumber(item.score) : item.score}
                </Text>
                {item.recent_score_increase ? (
                  <ArrowIcon stroke={Colors.ORANGE} />
                ) : (
                  <View style={{ width: 10 }}></View>
                )}
              </View>
            </View>
          </View>
        </View>
      </TouchableOpacity>
    );
  }
);

export default SeriesRankingItem;