nomadmania-app/src/screens/InAppScreens/MapScreen/UserItem/index.tsx

import { useEffect, useRef } from 'react';
import { View, Image, Text, TouchableOpacity, Platform } from 'react-native';

import { Colors } from 'src/theme';

import MapLibreGL, { PointAnnotationRef } from '@maplibre/maplibre-react-native';
import { useNavigation } from '@react-navigation/native';
import { NAVIGATION_PAGES } from 'src/types';
import moment from 'moment';
import { styles } from '../MarkerItem/styles';

const UserItem = ({ marker }: { marker: any }) => {
  const calloutUserRef = useRef<PointAnnotationRef>(null);
  const navigation = useNavigation();

  useEffect(() => {
    if (Platform.OS === 'android') {
      calloutUserRef.current?.refresh();
    }
  }, [marker]);

  const formatDateToLocalTime = (utcDate: string) => {
    const date = moment.utc(utcDate).local();
    const now = moment();

    if (now.diff(date, 'days') === 1) {
      return 'yesterday';
    }

    if (now.diff(date, 'weeks') === 1) {
      return 'last week';
    }

    return date.fromNow();
  };

  return (
    <>
      {Platform.OS === 'ios' ? (
        <MapLibreGL.PointAnnotation
          id="selected_user_callout"
          coordinate={marker.coordinates}
          anchor={{ x: 0.5, y: 1 }}
        >
          <View style={styles.customView}>
            <View style={styles.calloutContainer}>
              <View style={[styles.calloutImageContainer, { borderColor: Colors.WHITE }]}>
                <Image
                  source={{ uri: marker.avatar.uri }}
                  style={styles.userImage}
                  resizeMode="contain"
                />
              </View>
              <View style={styles.calloutTextContainer}>
                <View style={{ flexDirection: 'row', alignItems: 'center', gap: 8 }}>
                  <Image source={{ uri: marker.flag.uri }} style={styles.flag} resizeMode="cover" />
                  <Text style={styles.seriesName}>
                    {marker.first_name + ' ' + marker.last_name}
                  </Text>
                </View>
                <Text style={styles.markerName}>
                  Last seen: {formatDateToLocalTime(marker.last_seen)}
                </Text>
              </View>
              <TouchableOpacity
                style={[styles.calloutButton]}
                onPress={() =>
                  navigation.navigate(
                    ...([NAVIGATION_PAGES.PUBLIC_PROFILE_VIEW, { userId: marker.id }] as never)
                  )
                }
              >
                <Text style={styles.calloutButtonText}>See profile</Text>
              </TouchableOpacity>
            </View>
          </View>
        </MapLibreGL.PointAnnotation>
      ) : (
        <MapLibreGL.PointAnnotation
          id="selected_user_callout"
          coordinate={marker.coordinates}
          anchor={{ x: 0.5, y: 1.1 }}
          onSelected={() =>
            navigation.navigate(
              ...([NAVIGATION_PAGES.PUBLIC_PROFILE_VIEW, { userId: marker.id }] as never)
            )
          }
          selected={true}
          ref={calloutUserRef}
        >
          <View style={styles.customView}>
            <View style={styles.calloutContainer}>
              <View style={styles.calloutImageContainer}>
                <Image
                  source={{ uri: marker.avatar.uri }}
                  style={styles.userImage}
                  resizeMode="contain"
                />
              </View>
              <View style={styles.calloutTextContainer}>
                <View style={{ flexDirection: 'row', alignItems: 'center', gap: 8 }}>
                  <Image source={{ uri: marker.flag.uri }} style={styles.flag} resizeMode="cover" />
                  <Text style={styles.seriesName}>
                    {marker.first_name + ' ' + marker.last_name}
                  </Text>
                </View>

                <Text style={styles.markerName}>
                  Last seen: {formatDateToLocalTime(marker.last_seen)}
                </Text>
              </View>
              <TouchableOpacity
                style={[styles.calloutButton]}
                onPress={() =>
                  navigation.navigate(
                    ...([NAVIGATION_PAGES.PUBLIC_PROFILE_VIEW, { userId: marker.id }] as never)
                  )
                }
              >
                <Text style={styles.calloutButtonText}>See profile</Text>
              </TouchableOpacity>
            </View>
          </View>
        </MapLibreGL.PointAnnotation>
      )}
    </>
  );
};

export default UserItem;