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

const Map = (props) => {
    return (
        <MapView
            ref={props.getRef}
            provider={null}
            loadingEnabled={true}
            style={styles.map}
            showsUserLocation={true}
            region={props.region}
            onMapReady={props.onMapReady}
        >
            {props.markers?.map((marker, i) => {
                const latlng = {latitude: marker.latitude, longitude: marker.longitude}

                return (
                    <Marker
                        key={i}
                        coordinate={latlng}
                        icon={null}
                        onPress={(e) => props.onMarkerPressed(e, marker)}
                    >
                        <Image source={Assets.icons.stationMapPin}/>
                    </Marker>
                )
            })}
        </MapView>
    )
}

export default Map

const styles = {
   map: {
     flex: 1
   }
}