import React, { useEffect, useRef } from 'react';
import L from "leaflet";
import "leaflet/dist/leaflet.css";

export default function Map() {


    const mapContainerRef = useRef(null);

    useEffect( async () => {
	//const res =await Axios.get(BASE_PATH + 'fetchProperty')

	//TODO Is this the map unload part?
	const container = L.DomUtil.get(mapContainerRef.current);
	if(container != null) {
	    container._leaflet_id = null;
	}

	if(container) {

	    const mapView = L.map( mapContainerRef.current, {
		zoom: 13,
		center: [19.059984, 72.889999]
		//  maxZoom: 13
		// minZoom: 15
	    });

	    // const canvas = mapView.getCanvasContainer();
	    mapView.zoomControl.setPosition("bottomright");
	    mapView.attributionControl.addAttribution(
		"<a href='https://mascots.pro'>Mascots. pro</a>"
	    );

	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,
	    }).addTo(map);

	    const mask = L.tileLayer.mask(
		"https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token={accessToken}",
		{
		    attribution: '<a href="https://mascots.pro">Mascots pro</a>',
		    maskSize: 300
		    // maxZoom: 18,
		    // maxNativeZoom: 16
		    // tms: true
		}
	    ).addTo(mapView);

	    mapView.on("mousemove", function (e) {
		mask.setCenter(e.containerPoint);
	    });

	    /**
	    res.data.map((marker) => {

		const innerHtmlContent = `<div id='popup-container' class='popup-container'> <h3> Property Details</h3>
    <div class='popup-label'>Building Name :<p>${marker.Building}</p></div>
    <div class='popup-address-label'> Address : <p>${marker.Landmark}, ${marker.Location}</p></div>
    <div class='popup-rent-label'>Monthly Rent : <p> ₹ ${marker.Price}</p></div>
    </div>`;
		const divElement = document.createElement("div");
		const assignBtn = document.createElement("div");
		assignBtn.className = "map-link";
		assignBtn.innerHTML = `<button class="view-btn">View Property</button>`;
		divElement.innerHTML = innerHtmlContent;
		divElement.appendChild(assignBtn);
		assignBtn.addEventListener("click", (e) => {
		    console.log("dsvsdvb");
		});
		var iconOptions = {
		    iconUrl: "/images/location_pin2.svg",
		    iconSize: [25, 25]
		};
		var customIcon = L.icon(iconOptions);
		// create popup contents
		var customPopup = divElement;
		// specify popup options
		var customOptions = {
		    maxWidth: "500",
		    className: "custom"
		};
		const markerOptions = {
		    // title: "MyLocation",
		    //    draggable: true
		    clickable: true,
		    icon: customIcon
		};
		const mark = L.marker([marker.Latitude,marker.Longitude], markerOptions);
		mark.bindPopup(customPopup, customOptions);
		mark.addTo(mapView);
		// return mapView.off();
	    });
*/
	    return () => mapView.remove();
	}
    }, [])
    return (
	<div className="map-box">
            <div className="map-container" ref={mapContainerRef}></div>
	</div>
    );
};
//https://stackoverflow.com/a/67486824/15078958
