import React from 'react';
import { loadBaseLayers, loadLayers } from './Utils';
import MapContext from '../../components/Map/MapContext';
import useMap from '../../components/Map/useMap';
import "./Map.css";

/**
 * @component
 * @category LayerSwitcher
 */
function MapContainer (props){

    const { children, config } = props;

    const onInitHandler = map => {
		loadBaseLayers(map, config.baseLayers);
		loadLayers(map, config.layerTree);	
	};

    const zoom = config.map.zoom;
	const maxZoom = config.map.maxZoom;
	const center = config.map.center;

    //Invocamos el Hook useMap para iniciar el mapa
	const { mapRef, map } = useMap({ center, zoom, maxZoom, onInit: onInitHandler });

    return (
		<MapContext.Provider value={{ map }}>
			<div ref={mapRef} id="ol-map" className="ol-map">
				{children}
			</div>
		</MapContext.Provider>
	);
}

export default MapContainer;