import React, { useEffect, useRef, useState } from 'react'
import PropTypes from 'prop-types';
import L from 'leaflet'

import "leaflet/dist/leaflet.css";

export default function DistancesMap({distances}) {

    //console.log('distances-map:DistanesMap: distances.lngth: ' + distances.length);

    /*lat and lon of Braunschweig,DE*/
    const position = [52.26594, 10.52673]

    const mapRef = useRef();

    useEffect(() => {

        const map = L.map(
	    mapRef.current,
	    {attributionControl: true}
	).setView(
	    position,
	    6
	);

	L.tileLayer(
	    "http://{s}.tile.osm.org/{z}/{x}/{y}.png",
	    {
                attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors',
		maxZoom: 18,
		scrollWheelZoom: false,
	    }).addTo(map);

	//TODO: Why is 'scrollWheelZoom: false,' above not working?
	//TODO: Why the following line instead?
	map.scrollWheelZoom.disable()

	distances.map( function( value, key ) {

	    //console.log('distances-map:DistanesMap: value: ' +JSON.stringify(value));
	    //console.log('distances-map:DistanesMap: value[2]: ' + value[2]);
	    const diameter = value[7];
	    //console.log('distances-map:DistanesMap: diameter: ' + diameter);
	    const radius = diameter / 2;
	    //console.log('distances-map:DistanesMap: radius: ' + radius);

	    //add circle with a radius of X m
	    //https://leafletjs.com/reference.html#circle
	    var circle = L.circle( [ value[3], value[2] ], {
		radius: radius
	    }).addTo(map);
	});
	// unmount map function
	//You should unmount the function in react.js to remove the existing map.
	return () => map.remove();
    }, []);    

    if ( distances !== undefined && distances !== null && distances.length > 0 ) {
	return (
	    <>
		<div
		    style={{padding: 0, margin: 0, height: "85vh",}}
		    ref={el => mapRef.current = el}>
		</div>
	    </>
	);
    }else{
	//TODO Why does mapRef have to be present?
	return (
            <>
		<p>loading...</p>
		<div
		    ref={el => mapRef.current = el}>
		</div>
            </>
	);
    }
}
DistancesMap.propTypes = {
    distances: PropTypes.array
};