import React from 'react';
import PropTypes from 'prop-types';
import {MapContainer,Polyline,TileLayer} from 'react-leaflet';

/*JS module import (vs cdn or style link)*/
import 'leaflet/dist/leaflet.css'
import './entities-map.css';

import EntitiesMarker from './entities-marker';

export default function RelationsMap({relations}) {
    /*lat and lon of Braunschweig,DE*/
    const position = [52.26594, 10.52673]
    //set polyline color
    const colorOptions = { color: 'darkblue' }
    if(relations.length === 0){
	return (
	    <>
		<p>RelationsMap loading...</p>;
	    </>
	);
    }else{
	return (
	<>
	    <MapContainer
		center={position}
		zoom={8}
		minZoom={2}
		scrollWheelZoom={false}
	    >
		<TileLayer
		    attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
		    url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
		/>
		{
		    relations.map(function(value,key) {
			//console.log(`key: ${key}, valueFromLat: ${value[0][2]}, valueToLon: ${value[1][3]}`);
			return<Polyline
				  key={key}
				  pathOptions={colorOptions}
				  positions={[[value[0][2], value[0][3]],[value[1][2],value[1][3]]]}
			      />

                    })
		}
	    </MapContainer>
	</>
	);
    }
}
RelationsMap.propTypes = {
    relations: PropTypes.array.isRequired
};