import React from 'react'
import { Marker } from 'react-native-maps'
import platform from '../../util/Platforms'
import { View, Image } from 'react-native'
import DefaultText from '../DefaultText'

const markerImage = require('./assets/Marker_alt.png')
const selectedMarkerImage = require('./assets/selected_trader.png')
const clusterImage18 = require('./assets/Cluster_18.png')
const clusterImage22 = require('./assets/Cluster_22.png')
const clusterImage26 = require('./assets/Cluster_26.png')

const MapMarker = ({ coordinate, selected, onPress, pointCount }) => {
  if (pointCount) {
    const width = pointCount > 99 ? 34 : 24
    let clusterImage = clusterImage18
    let bottom = 0
    let imageleftOffset = (width - 18) / 2
    if (pointCount > 9) {
      clusterImage = clusterImage22
      imageleftOffset = (width - 22) / 2
      bottom = -2
    }
    if (pointCount > 99) {
      clusterImage = clusterImage26
      imageleftOffset = (width - 26) / 2
      bottom = -4
    }
    return <Marker
        coordinate={coordinate}
        onPress={onPress}
        anchor={platform.isIOS() ? null : { x: 0.5, y: 0.5 }}>
      <View style={{ alignItems: 'center', width }}>
        <Image source={clusterImage} style={{ position: 'absolute', left: imageleftOffset }}/>
        <DefaultText style={{ bottom, color: 'white', fontSize: 14 }}>{pointCount}</DefaultText>
      </View>
    </Marker>
  }

  const marker = selected ? selectedMarkerImage : markerImage
  return <Marker
      coordinate={coordinate}
      onPress={onPress}
      anchor={platform.isIOS() ? null : { x: 0.5, y: 0.5 }}
      image={marker}/>
}

export default MapMarker

@@ -327,23 +327,21 @@
  cluster
-Image18
+Over4
  = requi
@@ -357,18 +357,13 @@
 ets/
-Cluster_18
+over4
 .png
@@ -378,23 +378,21 @@
  cluster
-Image22
+Over9
  = requi
@@ -408,18 +408,13 @@
 ets/
-Cluster_22
+over9
 .png
@@ -429,23 +429,22 @@
  cluster
-Image26
+Over99
  = requi
@@ -460,18 +460,14 @@
 ets/
-Cluster_26
+over99
 .png
@@ -480,54 +480,27 @@
 nst 
-MapMarker = (%7B coordinate, selected, onPress, 
+getClusterImage = (
 poin
@@ -505,18 +505,16 @@
 intCount
- %7D
 ) =%3E %7B%0A 
@@ -514,20 +514,23 @@
  =%3E %7B%0A  
-if (
+return 
 pointCou
@@ -535,29 +535,43 @@
 ount
-) %7B%0A    const width =
+ %3E 99 %0A    ? clusterOver99 %0A    : (
  poi
@@ -585,35 +585,27 @@
  %3E 9
-9 ? 34 : 24%0A
+ %0A    
     
-let
+?
  cluster
 Imag
@@ -604,95 +604,121 @@
 ster
-Image = clusterImage18%0A    let bottom = 0%0A    let imageleftOffset = (width - 18) / 2%0A  
+Over9 %0A        : clusterOver4%0A      ) %0A%7D%0A%0Aconst MapMarker = (%7B coordinate, selected, onPress, pointCount %7D) =%3E %7B%0A
   if
@@ -733,20 +733,16 @@
 ount
- %3E 9
 ) %7B%0A    
   cl
@@ -741,232 +741,97 @@
     
-  clusterImage = clusterImage22%0A      imageleftOffset = (width - 22) / 2%0A      bottom = -2%0A    %7D%0A    if (pointCount %3E 99) %7B%0A      clusterImage = clusterImage26%0A      imageleftOffset = (width - 26) / 2%0A      bottom = -4%0A    %7D
+const marginTop = pointCount %3E 99 ? 4 : 1%0A    const marginRight = pointCount %3C 10 ? 2 : 1
 %0A   
@@ -977,54 +977,17 @@
     
-%3CView style=%7B%7B alignItems: 'center', width %7D%7D%3E
+  %3CImage 
 %0A   
@@ -991,22 +991,17 @@
         
-%3CImage
+ 
  source=
@@ -1001,17 +1001,20 @@
 source=%7B
-c
+getC
 lusterIm
@@ -1020,68 +1020,100 @@
 mage
-%7D style=%7B%7B position: 'absolute', left: imageleftOffset
+(pointCount)%7D%0A          style=%7B%7B alignItems: 'flex-end', justifyContent: 'flex-start'
  %7D%7D
-/
 %3E%0A
+  
     
@@ -1141,16 +1141,8 @@
 e=%7B%7B
- bottom,
  col
@@ -1166,20 +1166,57 @@
 Size: 14
- %7D%7D%3E
+, marginRight, marginTop %7D%7D%3E%0A            
 %7BpointCo
@@ -1219,16 +1219,27 @@
 ntCount%7D
+%0A          
 %3C/Defaul
@@ -1255,14 +1255,17 @@
     
-%3C/View
+  %3C/Image
 %3E%0A  

set clusters to 3 sizes and resized the images to not overlap on the map