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

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

import { styles } from './styles';
import { Colors } from 'src/theme';

import CheckSvg from 'assets/icons/mark.svg';
import MapLibreGL, { PointAnnotationRef } from '@maplibre/maplibre-react-native';

const MarkerItem = ({
  marker,
  toggleSeries,
  token
}: {
  marker: any;
  toggleSeries: (item: any) => void;
  token: string;
}) => {
  const calloutRef = useRef<PointAnnotationRef>(null);
  useEffect(() => {
    if (Platform.OS === 'android') {
      calloutRef.current?.refresh();
    }
  }, [marker]);
  return (
    <>
      {Platform.OS === 'ios' ? (
        <MapLibreGL.PointAnnotation
          id="selected_marker_callout"
          coordinate={marker.coordinates}
          anchor={{ x: 0.5, y: 1 }}
        >
          <View style={styles.customView}>
            <View style={styles.calloutContainer}>
              <View style={styles.calloutImageContainer}>
                <Image
                  source={{ uri: marker.icon.uri }}
                  style={styles.calloutImage}
                  resizeMode="contain"
                />
              </View>
              <View style={styles.calloutTextContainer}>
                <Text style={styles.seriesName}>{marker.series_name}</Text>
                <Text style={styles.markerName}>{marker.name}</Text>
              </View>
              <TouchableOpacity
                style={[
                  styles.calloutButton,
                  (marker.visited === 1 &&
                    token && {
                      backgroundColor: Colors.WHITE,
                      borderWidth: 1,
                      borderColor: Colors.BORDER_LIGHT
                    }) ||
                    {}
                ]}
                onPress={() => toggleSeries(marker)}
              >
                {marker?.visited === 1 && token ? (
                  <View style={styles.completedContainer}>
                    <CheckSvg width={14} height={14} fill={Colors.DARK_BLUE} />
                    <Text style={[styles.calloutButtonText, { color: Colors.DARK_BLUE }]}>
                      Completed
                    </Text>
                  </View>
                ) : (
                  <Text style={styles.calloutButtonText}>Mark Completed</Text>
                )}
              </TouchableOpacity>
            </View>
          </View>
        </MapLibreGL.PointAnnotation>
      ) : (
        <MapLibreGL.PointAnnotation
          id="selected_marker_callout"
          coordinate={marker.coordinates}
          anchor={{ x: 0.5, y: 0.9 }}
          onSelected={() => toggleSeries(marker)}
          selected={true}
          ref={calloutRef}
        >
          <View style={styles.customView}>
            <View style={styles.calloutContainer}>
              <View style={styles.calloutImageContainer}>
                <Image
                  source={{ uri: marker.icon.uri }}
                  style={styles.calloutImage}
                  resizeMode="contain"
                />
              </View>
              <View style={styles.calloutTextContainer}>
                <Text style={styles.seriesName}>{marker.series_name}</Text>
                <Text style={styles.markerName}>{marker.name}</Text>
              </View>
              <TouchableOpacity
                style={[
                  styles.calloutButton,
                  (marker.visited === 1 &&
                    token && {
                      backgroundColor: Colors.WHITE,
                      borderWidth: 1,
                      borderColor: Colors.BORDER_LIGHT
                    }) ||
                    {}
                ]}
                onPress={() => toggleSeries(marker)}
              >
                {marker?.visited === 1 && token ? (
                  <View style={styles.completedContainer}>
                    <CheckSvg width={14} height={14} fill={Colors.DARK_BLUE} />
                    <Text style={[styles.calloutButtonText, { color: Colors.DARK_BLUE }]}>
                      Completed
                    </Text>
                  </View>
                ) : (
                  <Text style={styles.calloutButtonText}>Mark Completed</Text>
                )}
              </TouchableOpacity>
            </View>
          </View>
        </MapLibreGL.PointAnnotation>
      )}
    </>
  );
};

export default MarkerItem;