import React, { useEffect, useRef } from 'react';
import MapView, { PROVIDER_GOOGLE } from 'react-native-maps';
//import Maps1 from './Maps1'
import Maps2 from './Maps2'
import Maps3 from './Maps3'
import { MyMarker } from './Cluster';

const MapOnly= ({region, stopList, onMapReady, onMarkerPress}) => {
  const mapRef = useRef();
  useEffect(() => {
    console.log('mapRef.current', mapRef.current);
    //mapRef.current.animateToRegion(region, 500);
    mapRef.current.animateCamera({ center: region, zoom: 17 }, { duration: 500 }); //移动地图到当前位置并放大
  }, [region])
  return (
    <MapView
      ref={mapRef}
      style={ui.flex1}
      initialRegion={region}
      onMapReady={onMapReady}
      provider={PROVIDER_GOOGLE}
      showsUserLocation={true}>
      { stopList.map((marker, index) => {
        return (
          <MyMarker
            key={index}
            coordinate={marker}
            onPress={() => onMarkerPress(marker.id)}
          />
        );
      })}
    </MapView>
  )
}

export default {
  Maps1: Maps2,
  Maps2: Maps2,
  Maps3: Maps3,
  MapOnly: MapOnly
}