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

import { useEffect, useRef } from 'react';
import { View, Image, Text, TouchableOpacity, Platform } from 'react-native';
import { Marker, Callout, CalloutSubview, MapMarker } from 'react-native-maps';
import CustomCallout from '../CustomCallout';

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

import CheckSvg from 'assets/icons/mark.svg';

const MarkerItem = ({
  marker,
  iconUrl,
  coordinate,
  seriesName,
  toggleSeries,
  token
}: {
  marker: ItemSeries;
  iconUrl: string;
  coordinate?: any;
  seriesName: string;
  toggleSeries: (item: any) => void;
  token: string;
}) => {
  let markerRef = useRef<MapMarker>(null);
  useEffect(() => {
    if (markerRef.current && Platform.OS !== 'ios') {
      markerRef.current?.showCallout();
    }
  }, [marker.visited]);

  return (
    <>
      <Marker coordinate={coordinate} tracksViewChanges={false} ref={markerRef}>
        <View
          style={[
            styles.markerContainer,
            (marker.visited === 1 && token && { backgroundColor: Colors.ORANGE }) || {}
          ]}
        >
          <Image source={{ uri: iconUrl }} style={styles.icon} resizeMode="contain" />
        </View>
        {Platform.OS === 'ios' ? (
          <Callout tooltip style={styles.customView}>
            <View style={styles.calloutContainer}>
              <View style={styles.calloutImageContainer}>
                <Image source={{ uri: iconUrl }} style={styles.calloutImage} resizeMode="contain" />
              </View>
              <View style={styles.calloutTextContainer}>
                <Text style={styles.seriesName}>{seriesName}</Text>
                <Text style={styles.markerName}>{marker.name}</Text>
              </View>
              <CalloutSubview
                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>
                )}
              </CalloutSubview>
            </View>
          </Callout>
        ) : (
          <CustomCallout
            marker={marker}
            toggleSeries={toggleSeries}
            seriesName={seriesName}
            token={token}
          />
        )}
      </Marker>
    </>
  );
};

export default MarkerItem;