import React from 'react';
import PropTypes from 'prop-types';
import {MapContainer,TileLayer} from 'react-leaflet';
/*JS module import (vs cdn or style link)*/
import 'leaflet/dist/leaflet.css'
import './map.css';

import MarkerElem from './marker-elem';

export default function Map({elements}) {
    /*lat and lon of Braunschweig,DE*/
    const position = [52.26594, 10.52673]
    //TODO make this switch available via configuration!
    const hasGtfs = false;
    return (
	<>
	    <MapContainer
		center={position}
		zoom={10}
		minZoom={2}
		scrollWheelZoom={true}
	    >
		<TileLayer
		    attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
		    url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
		/>
		{
		    elements.map(function(value,key) {
			//console.log(`key: ${key}, tripId: ${value.tripId}`);
			return <MarkerElem key={value.id} index={value.id} element={value}/>;
                    })
		}
	    </MapContainer>
	</>
    );
}
Map.propTypes = {
    elements: PropTypes.array
};