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

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 - 150,
    width: Theme.screen.w,
  }
}

export default function RenderMap(props){

  const defaultRegion = {
    latitude: 14.599512,
    longitude: 120.984222,
    latitudeDelta: 12,
    longitudeDelta: 6,
  }

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