class FranceMap {

	constructor(wrap) {

		this.mapSize = 1000;
		this.preSize = 1000;

		this.bounds = {
			minLon: -5.1, maxLon: 9.6,
			minLat: 41.3, maxLat: 51.1
		};

		this.xOffset 
		= this.yOffset 
		= this.scale 
		= this.centerLonScale 
		= 0;

		this.infoPanel 
		= this.infoPanelContent 
		= this.previewSvg 
		= this.currentPreviewPath 
		= null;

		this.cols = null;
		this.mapSvg = this.create("svg:svg",
			{
				id: "map",
				viewBox: "0 0 " + this.mapSize + " " + this.mapSize
			});

		this.mapSvg.addEventListener("pointerdown",
			evt => {

				evt.preventDefault();
				evt.target.releasePointerCapture(evt.pointerId);
		
			});

		wrap.appendChild(this.mapSvg);
		this.setupBounds();
		this.setupInfoPanel(wrap);
		this.loadGeoJSON();

		this.darkModeMediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
		this.darkModeMediaQuery.addEventListener("change",
			() => 
				this.updatePreviewColors());
	
	}

	setupBounds() {

		const width = this.bounds.maxLon - this.bounds.minLon;
		const height = this.bounds.maxLat - this.bounds.minLat;
		const centerLat = (this.bounds.maxLat + this.bounds.minLat) / 2;
		
		this.centerLonScale = Math.cos(centerLat * Math.PI / 180);
		
		const scaleX = this.mapSize / (width * this.centerLonScale);
		const scaleY = this.mapSize / height;

		this.scale = Math.min(scaleX,
			scaleY);

		const mapWidth = width * this.scale * this.centerLonScale;
		const mapHeight = height * this.scale;
		
		this.xOffset = (this.mapSize - mapWidth) / 2;
		this.yOffset = (this.mapSize - mapHeight) / 2;
	
	}

	projectCoordinate([lon, lat]) {

		const x = (lon - this.bounds.minLon) * this.scale * this.centerLonScale;
		const y = (this.bounds.maxLat - lat) * this.scale;

		return [x + this.xOffset, y + this.yOffset];
	
	}

	generatePath(feature) {

		const coordinates = feature["geometry"]["coordinates"];

		return feature["geometry"]["type"] === "Polygon" 
			? this.polygonToPath([coordinates])
			: this.polygonToPath(coordinates);
	
	}

	polygonToPath(polygons) {

		return polygons.reduce((path, polygon) => {

			const [outerRing, ...innerRings] = polygon;
			const points = outerRing.map(coord => 
				this.projectCoordinate(coord)
				.join(","));
			
			path += `M${points[0]}L${points.slice(1)
			.join("L")}Z`;
			
			innerRings.forEach(ring => {

				const holePoints = ring.map(coord => 
					this.projectCoordinate(coord)
					.join(","));

				path += `M${holePoints[0]}L${holePoints.slice(1)
				.join("L")}Z`;
			
			});
			
			return path;
		
		},
		"");
	
	}

	setupInfoPanel(wrap) {

		this.infoPanel = this.create("div",
			{ id: "info" });
		this.infoPanelContent = this.create("div",
			{ id: "cnt" });
		this.previewSvg = this.create("svg:svg",
			{
				id: "thmb",
				viewBox: "0 0 " + this.preSize + " " + this.preSize
			});
		
		this.infoPanel.append(this.infoPanelContent,
			this.previewSvg);
		wrap.appendChild(this.infoPanel);
	
	}

	async loadGeoJSON() {

		try {

			// const geofile = "https://github.com/gregoiredavid/france-geojson/blob/master/departements-version-simplifiee.geojson";
			const geofile = "media/geojson/departements-version-simplifiee.geojson";

			const response = await fetch(geofile);
			const features = (await response.json())["features"];

			this.renderMap(features);
		
		}
		catch(err) {

			console.log("geojson error",
				err);
		
		}
	
	}

	getDepartmentCenter(feature) {

		const geom = feature["geometry"];
		const coordinates = geom["coordinates"];
		let points = [];
		
		const geometryType = geom["type"];
		
		if(geometryType === "Polygon") {

			points = coordinates[0]; // Use outer ring
		
		}
		else if(geometryType === "MultiPolygon") {

			// Use the largest polygon's outer ring
			points = coordinates.reduce((largest, polygon) => {

				return polygon[0].length > largest.length ? polygon[0] : largest;
			
			},
			coordinates[0][0]);
		
		}
		
		// Calculate average of points
		const sum = points.reduce(
			([sumX, sumY], [x, y]) => 
				[sumX + x, sumY + y],
			[0, 0]
		);
		
		return [
			sum[0] / points.length,
			sum[1] / points.length
		];
	
	}

	renderMap(features) {

		const deptsWithPos = features
		.map(feature => {

			const [lon, lat] = this.getDepartmentCenter(feature);
			const [x, y] = this.projectCoordinate([lon, lat]);

			return { feature, y, path: this.generatePath(feature) };
		
		})
		.sort((a, b) => 
			a.y - b.y);

		const fragment = document.createDocumentFragment();

		deptsWithPos.forEach((parsed, idx) => {

			const props = parsed.feature["properties"];

			const path = this.create("svg:path",
				{
					"d": parsed.path,
					"class": "dept",
					"data-name": props["nom"],
					"data-code": props["code"]
				});
			
			// fix mobile devices over & out bug
			path.addEventListener("pointerdown",
				evt => {

					evt.preventDefault();
					evt.target.releasePointerCapture(evt.pointerId);
			
				});
			path.addEventListener("pointerover",
				() => 
					this.showDepartmentInfo(parsed.feature));
			path.addEventListener("pointerout",
				() => 
					this.hideDepartmentInfo());

			setTimeout(
				() => {

					path.style.opacity = 1;
					path.style.stroke = "#666666";
				
				}, 
				512 + Math.round(parsed.y) * 2
				// 256 + Math.round(Math.random() * 2048)
			);
			
			fragment.appendChild(path);
		
		});

		this.mapSvg.appendChild(fragment);
	
	}

	updatePreviewColors() {

		if(!this.currentPreviewPath) 
			return;

		const isDarkMode = this.darkModeMediaQuery.matches;

		this.setAttributes(this.currentPreviewPath,
			{
				fill: isDarkMode ? "#2d2d2d" : "#f4f4f4",
				stroke: isDarkMode ? "#666666" : "#333333"
			});
	
	}

	showDepartmentInfo(feature) {

		while(this.previewSvg.firstChild) 
			this.previewSvg.removeChild(this.previewSvg.firstChild);

		this.currentPreviewPath = this.create("svg:path",
			{
				"d": this.generatePath(feature)
			});
		
		this.updatePreviewColors();
		this.previewSvg.appendChild(this.currentPreviewPath);
		
		const bbox = this.currentPreviewPath.getBBox();
		const padding = bbox.width * 0.05;
		const bboxArea = bbox.width * bbox.height;
		
		this.setAttributes(this.previewSvg,
			{
				viewBox: `${bbox.x - padding} ${bbox.y - padding} ${bbox.width + padding * 2} ${bbox.height + padding * 2}`
			});
		
		this.setAttributes(this.currentPreviewPath,
			{
				"stroke-width": String(5 * Math.sqrt(bboxArea) / this.preSize)
			});

		const props = feature["properties"];

		this.infoPanelContent.textContent = `${props["code"]} ${props["nom"]}`;
		this.infoPanel.classList.add("visible");
	
	}

	hideDepartmentInfo() {

		this.infoPanel.classList.remove("visible");
	
	}

	create(tag, attributes = {}, children = []) {

		const element = tag.includes("svg:") 
			? document.createElementNS("http://www.w3.org/2000/svg",
				tag.replace("svg:",
					""))
			: document.createElement(tag);

		Object.entries(attributes)
		.forEach(([key, value]) => 
			element.setAttribute(key,
				value));

		children.forEach(child => 
			element.appendChild(child));
		return element;
	
	}

	setAttributes(element, attributes) {

		Object.entries(attributes)
		.forEach(([key, value]) => 
			element.setAttribute(key,
				value));
	
	}

}

new FranceMap(document.querySelector("#geojson-wrap"));