import React, { useEffect } from "react";
import L from "leaflet";
import "leaflet/dist/leaflet.css";
import icon from "leaflet/dist/images/marker-icon.png";
import iconShadow from "leaflet/dist/images/marker-shadow.png";

let DefaultIcon = L.icon({
iconUrl: icon,
shadowUrl: iconShadow,
});

export default function MapNxt() {

    useEffect(() => {

	var container = L.DomUtil.get("map");

	//https://stackoverflow.com/a/50034912/15078958
	//Before initializing map check if the map is already initiated or not
	if (container != null) {
	    container._leaflet_id = null;
	}
	//TODO Is this an alternative?
	//https://stackoverflow.com/a/53836894/15078958
	/**map.invalidateSize();*/

	var map = L.map("map").setView([51.505, -0.09], 13);

	//base layer
	const baseLayerMapBox = L.tileLayer(
	    "https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token={accessToken}",
	{
            attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
            maxZoom: 18,
            id: "mapbox/streets-v11",
            tileSize: 512,
            zoomOffset: -1,
            accessToken:  "pk.eyJ1IjoidGFyLWhlbCIsImEiOiJjbDJnYWRieGMwMTlrM2luenIzMzZwbGJ2In0.RQRMAJqClc4qoNwROT8Umg",
	    scrollWheelZoom: false,
	});

	//overlay
	const littleton = L.marker([39.61, -105.02]).bindPopup('This is Littleton, CO.'),
    denver    = L.marker([39.74, -104.99]).bindPopup('This is Denver, CO.'),
    aurora    = L.marker([39.73, -104.8]).bindPopup('This is Aurora, CO.'),
	      golden    = L.marker([39.77, -105.23]).bindPopup('This is Golden, CO.');
	const overlayCity = L.layerGroup([littleton, denver, aurora, golden]);

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

	//layer control
	var baseMaps = {
	    "MapBox": baseLayerMapBox,
	};
	var overlayMaps = {
	    "Cities": overlayCity
	};
	var layerControl = L.control.layers(baseMaps, overlayMaps).addTo(map);

	//marker
	L.Marker.prototype.options.icon = DefaultIcon;
	var marker = L.marker(
	    [51.5, -0.09],
	    {alt: 'popup marker name: ' + "Hello world! I am a popup."}
	).addTo(map);
	marker.bindPopup("<b>Hello world!</b><br>I am a popup.").openPopup();
    }, []);

    return (
	<>
	    <p>MapNext</p>
	    <div
		id="map"
		style={{ height: "42vh" }}>
	    </div>
	</>
    );
};
//https://stackoverflow.com/a/72016670/15078958
/**
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.8.0/dist/leaflet.css" integrity="sha512-hoalWLoI8r4UszCkZ5kL8vayOGVae1oxXe/2A4AO6J9+580uKHDO3JdHb7NzwwzK5xr/Fs0W40kiNHxM9vyTtQ==" crossorigin=""/>
*/

/**
<script src="https://unpkg.com/leaflet@1.8.0/dist/leaflet.js" integrity="sha512-BB3hKbKWOc9Ez/TAwyWxNXeoV9c1v6FIeYiBieIWkpLjauysF18NzgR1MBNBXf8/KABdlkX68nAhlwcDFLGPCQ==" crossorigin=""></script>
*/
