const svg = d3.select("svg")
const map1 = new Map();

const color1 = "#75d795"
const color2 = "#ff7c7c"
const color3 = "#ffe77c"
const color4 = "#7c9dff"

// Credit: https://www.artcraftblend.com/blogs/colors/shades-of-pastel
const colorMap = {
		"Tamil Nadu": color1,
		"Kerala": color2,
		"Karnataka": color3,
		"Andhra Pradesh": color4,
		"Maharashtra": color4,
		"Goa": color2,
		"Telangana": color2,
		"Odisha": color3,
		"Gujarat": color1,
		"Rajasthan": color3,
		"Chhattisgarh": color1,
		"Jharkhand": color2,
		"West Bengal": color1,
		"Assam": color2,
		"Meghalaya": color3,
		"Tripura": color4,
		"Mizoram": color1,
		"Manipur": color3,
		"Nagaland": color1,
		"Arunachal Pradesh": color4,
		"Sikkim": color2,
		"Bihar": color3,
		"Madhya Pradesh": color2,
		"Uttar Pradesh": color4,
		"Uttarakhand": color2,
		"Haryana": color1,
		"Punjab": color4,
		"Himachal Pradesh": color3,
		"Ladakh": color1,
		"Jammu and Kashmir": color2,
}

const colors9 = ["#75d795", "#EFDFD8", "#D5F6FB", "#E5ECF8", "#F0EBD8", "#F7DFC2", "#B4D9EF", "#F8C57C", "#A4D8D8"]

function drawMap(world) {
	const mapWidth = document.getElementById("indiaMap").getAttribute("width")
	const mapHeight = document.getElementById("indiaMap").getAttribute("height")
	const projection = d3.geoMercator().fitSize([mapWidth, mapHeight], world)
	const path = d3.geoPath().projection(projection);

	const states = svg.selectAll("g")
	.data(world.features)
	.enter()
	.append("g");

	states.append("path")
		.attr("d", path)
		.attr("class", "state")
		.attr("fill", d => colorMap[d.properties.name])
		.append("title") // Tooltip
		.text(d => d.properties.name)
		.each(function(d) {
			map1.set(d.properties.name, d3.geoCentroid(d));
		});

	states.append("text")
      .attr("x", d => projection(d3.geoCentroid(d))[0])
      .attr("y", d => projection(d3.geoCentroid(d))[1])
      .attr("text-anchor", "middle")
      .attr("font-size", "12px")
      .attr("fill", "black")
		.attr("class", "stateText")
		.attr("id", d => d.properties.name+"Text")
      .text(d => d.properties.name);

	// Draw the map
//	svg.selectAll("path")
//		.data(world.features)
//		.enter()
//		.append("path")
//		.attr("d", path)
//		.attr("class", "state")
//		.attr("fill", d => colorMap[d.properties.name])
//		.append("title") // Tooltip
//		.text(d => d.properties.name)
//		.each(function(d) {
//			map1.set(d.properties.name, d3.geoCentroid(d));
//		})
//		.each(function(d) {
//		const [x, y] = projection(d3.geoCentroid(d)); // Get centroid
//
//        d3.select(this.parentNode)  // Select the parent <svg> or <g> container
//            .append("text")  // Append text immediately after the path
//            .attr("x", x)
//            .attr("y", y)
//            .attr("text-anchor", "middle")
//            .attr("font-size", "12px")
//            .attr("fill", "black")
//            .text(d.properties.name);
//    });

}

// Load GeoJSON file
d3.json("india.json").then(drawMap)

console.log(map1)