import { View, Image, Text } from 'react-native';
import { Marker, Callout, CalloutSubview } from 'react-native-maps';
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
}: {
  marker: ItemSeries;
  iconUrl: string;
  coordinate?: any;
  seriesName: string;
  toggleSeries: (item: any) => void;
}) => {
  return (
    <Marker coordinate={coordinate} tracksViewChanges={false}>
      <View
        style={[styles.markerContainer, marker.visited === 1 && { backgroundColor: Colors.ORANGE }]}
      >
        <Image source={{ uri: iconUrl }} style={styles.icon} resizeMode="contain" />
      </View>

      <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 && {
                backgroundColor: Colors.WHITE,
                borderWidth: 1,
                borderColor: Colors.BORDER_LIGHT
              }
            ]}
            onPress={() => toggleSeries(marker)}
          >
            {marker?.visited === 1 ? (
              <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>
    </Marker>
  );
};

export default MarkerItem;
