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 { CRS } from "leaflet";

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

function getCountryStyle(feature) {
	console.log("feature", feature);
	// Définissez ici les styles en fonction des propriétés du feature
	return {
		fillColor: feature.properties.fillColor || "#555555", // Couleur de remplissage par défaut
		fillOpacity: feature.properties.fillOpacity || 0.5,
		color: feature.properties.stroke || "#3700ff", // Couleur de la bordure par défaut
		weight: feature.properties["stroke-width"] || 2.8,
		opacity: feature.properties["stroke-opacity"] || 1,
	};
}
// Fonction pour mettre à l'échelle les coordonnées
function scaleCoordinates(coords, scaleFactor, center) {
	return coords.map((coord) => {
		const [lon, lat] = coord;
		const scaledLon = center[0] + scaleFactor * (lon - center[0]);
		const scaledLat = center[1] + scaleFactor * (lat - center[1]);
		return [scaledLon, scaledLat];
	});
}

// Fonction pour mettre à l'échelle les données GeoJSON
function scaleGeoJSON(data) {
	return {
		...data,
		features: data.features.map((feature) => {
			if (feature.geometry.type === "Polygon" || feature.geometry.type === "MultiPolygon") {
				if (!feature.properties.scale) return feature;

				const scaleFactor = feature.properties.scale;
				const center = feature.properties.origin || [0, 0]; // Utiliser l'origine du JSON ou [0, 0] par défaut
				feature.properties.fillColor = "#00ff00"; // Couleur verte pour la France par exemple

				return {
					...feature,
					geometry: {
						...feature.geometry,
						coordinates: feature.geometry.coordinates.map((polygon) =>
							polygon.map((ring) =>
								scaleCoordinates(ring, scaleFactor, center)
							)
						),
					},
				};
			}
			return feature;
		}),
	};
}
export default function MyMap() {
	// const scaledData = scaleGeoJSON(mapDatas);
	const [scaledData, setScaledData] = useState(null);
	const FIRST_TILES_URL = "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png";
	const MERCATOR_TILES_URL = "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png";

	useEffect(() => {
		const scaled = scaleGeoJSON(mapDatas);
		console.log("scaled", scaled);
		setScaledData(scaled);

		const france = mapDatas.features.find((feature) => feature.properties.ADMIN === "France");
		console.log("France", france);

		console.log("scaledDatas", scaled);
	}, []);

	if (!scaledData) return null;
	return (
		<div>
			<MapContainer center={[51.505, -0.09]} zoom={2} scrollWheelZoom={false}>
				<TileLayer
					url='https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png'
					attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
				/>
				<GeoJSON
					data={scaledData.features}
					style={getCountryStyle}
					onEachFeature={(feature, layer) => {
						layer.on({
							mouseover: (e) => {
								e.target.setStyle({ fillColor: "red" });
							},
							mouseout: (e) => {
								e.target.setStyle({ fillColor: "green" });
							},
						});
					}}
				/>
			</MapContainer>
		</div>
	);
}
