import React, { useEffect, useState } from "react";
// import mapDatas from "../data/countries.json";
// import mapDatas from "../data/map.json";
// import mapDatas from "../data/countries.json";
// import mapDatas from "../data/retest.json";
// import mapDatas from "../data/Us.json";
// import mapDatas from "../data/customgeo_scaled.json";
// import mapDatas from "../data/unecouchesimple.geojson";
import { CRS } from "leaflet";

import { MapContainer, TileLayer, useMap, GeoJSON, Marker, Popup } from "react-leaflet";
import "leaflet/dist/leaflet.css";

import { useMapEvents } from "react-leaflet";

// function LocationMarker() {
// 	const [position, setPosition] = useState(null);
// 	const map = useMapEvents({
// 		click() {
// 			map.locate();
// 		},
// 		locationfound(e) {
// 			setPosition(e.latlng);
// 			map.flyTo(e.latlng, map.getZoom());
// 		},
// 	});

// 	return position === null ? null : (
// 		<Marker position={position}>
// 			<Popup>You are here</Popup>
// 		</Marker>
// 	);
// }

export default function MyMap() {
	const [geojsonData, setGeojsonData] = useState(null);
	console.log("geojsonData", geojsonData);
	const defaultStyle = {
		fillColor: "#32912f", // couleur par défaut
		weight: 1,
		opacity: 1,
		color: "white",

		fillOpacity: 1,
	};

	const hoverStyle = {
		fillColor: "#217632", // couleur de surbrillance
		weight: 1,
		opacity: 1,
		color: "white",

		fillOpacity: 1,
	};
	const highlightStyle = {
		fillColor: "#a50e2d", // couleur de surbrillance
		weight: 1,
		opacity: 1,
		color: "white",

		fillOpacity: 1,
	};
	useEffect(() => {
		fetch("/reel1.geojson")
			// fetch("/Us.json")
			.then((response) => response.json())
			.then((data) => setGeojsonData(data));
	}, []);
	if (!geojsonData) {
		return <div>Loading...</div>;
	}
	return (
		<div>
			<MapContainer
				center={[51.505, -0.09]}
				zoom={2}
				scrollWheelZoom={true}
				crs={CRS.EPSG3857} // Définir la projection EPSG:3857
			>
				{/* <TileLayer
					url='https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png'
					attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
				/> */}
				{/* <LocationMarker /> */}

				<GeoJSON
					// data={mapDatas.features}
					data={geojsonData.features}
					style={() => defaultStyle}
					onEachFeature={(feature, layer) => {
						const originalStyle = layer.options.style || {};

						layer.on({
							mouseover: (e) => {
								e.target.setStyle(hoverStyle);
							},
							mouseout: (e) => {
								e.target.setStyle(defaultStyle);
							},
							click: (e) => {
								e.target.setStyle(highlightStyle);
								if (!feature.properties.Name) return;
								alert(feature.properties.Name);
							},
						});
					}}
				/>
			</MapContainer>
		</div>
	);
}
