import React from 'react';
import {useState, useEffect} from 'react';
import {ScrollView, StyleSheet, Text, View, Dimensions, Button, Image, TextInput, TouchableOpacity, ActivityIndicator} from 'react-native';
import Theme from '../../../../components/theme.style.js';
import Assets from '../../../../components/assets.manager.js';
import Icon from '../../../../components/icons';
import DB from '../../../../components/storage';
import REQUEST from '../../../../components/api';
import {Divider} from 'react-native-elements';

import Geolocation from '@react-native-community/geolocation';
import SlidingUpPanel from 'rn-sliding-up-panel';
import MapView, { PROVIDER_GOOGLE, Marker } from 'react-native-maps';

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={PROVIDER_GOOGLE}
      provider={null}
      loadingEnabled={true}
      style={styles.map}
      showsUserLocation={true}
      region={props.region || defaultRegion}
      onMapReady={props.onMapReady}
    >
      {props.markers.map((marker, i) => (
        <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>
  )
}