import { useEffect } from 'react';

import { useSelector } from 'react-redux';
import { map } from './Map';
import { getGeofenceCenter } from './mapUtil';

const SelectedGeofenceMap = () => {
  const mapCenter = useSelector((state) => {
    console.log (state.geofences.selectedId);
    if (state.geofences.selectedId) {
      const geofence = state.geofences.items[state.geofences.selectedId] || null;
      const center = getGeofenceCenter (geofence);
      if (geofence) {
        return { position: [center.longitude, center.latitude] };
      }
    }
    return null;
  });

  useEffect(() => {
    if (mapCenter) {
      map.easeTo({ center: mapCenter.position, zoom: 18 });
    }
  }, [mapCenter]);
  
  return null;
};

export default SelectedGeofenceMap;