import { View, Text } from 'react-native';
import { Callout } from 'react-native-maps';

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

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

const CustomCallout = ({
  marker,
  toggleSeries,
  seriesName,
  token
}: {
  marker: ItemSeries;
  toggleSeries: (item: any) => void;
  seriesName: string;
  token: string;
}) => {
  return (
    <Callout style={styles.customCallout} onPress={() => toggleSeries(marker)}>
      <View style={[styles.calloutContainer, { flex: 1 }]}>
        <View style={[styles.calloutTextContainer, { marginTop: 0 }]}>
          <Text style={styles.seriesName}>{seriesName}</Text>
          <Text style={styles.markerName}>{marker.name}</Text>
        </View>
        <View
          style={[
            styles.calloutButton,
            (marker.visited === 1 &&
              token && {
                backgroundColor: Colors.WHITE,
                borderWidth: 1,
                borderColor: Colors.BORDER_LIGHT
              }) ||
              {}
          ]}
        >
          {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>
          )}
        </View>
      </View>
    </Callout>
  );
};

export default CustomCallout;
