import React from 'react';
import { StyleSheet } from 'react-native';
import Theme from '../../../../components/theme.style.js';
import Assets from '../../../../components/assets.manager.js';

import MapView, { PROVIDER_GOOGLE, Marker } from 'react-native-maps';
import { Image } from 'react-native';

const styles = {
   mapContainer: {
    ...StyleSheet.absoluteFillObject,
    flex: 1,
    marginTop: 60,
    height: Theme.screen.h - 15,
    width: Theme.screen.w,
    justifyContent: 'flex-end',
    alignItems: 'center',
   },
  map: {
    ...StyleSheet.absoluteFillObject,
    height: Theme.screen.h,
    width: Theme.screen.w,
  }
}


export default function RenderMap(props){

  if(!props.region) {
    return null;
  }

  return (
    <MapView
      ref={props.getRef}
      provider={PROVIDER_GOOGLE}
      // provider={null}
      loadingEnabled={true}
      style={styles.map}
      showsUserLocation={true}
      region={props.region}
      onMapReady={props.onMapReady}
    >
      {props.markers.map((marker, i) => (
        <Marker
          key={i}
          coordinate={marker.latlng}
          title={marker.name}
          description={marker.address}
          // image={Assets.icons.stationMapPin}
          // style={{backgroundColor: 'red'}}
          onPress={e => {
            props.onMarkerClick ? props.onMarkerClick(marker) : console.log('marker is pressed', marker)
          }}
        >
          <Image
            style={{height: 40, width: 40}}
            source={Assets.icons.stationMapPin}
            resizeMode='contain'
          />
        </Marker>
      ))}
    </MapView>
  )
}