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

const color1 = "#75d795" // Tamil
const color2 = "#ff7c7c" // Malayalam
const color3 = "#ffe77c" // Kannada
const color4 = "#7c9dff" // Telugu
const color5 = "#e0ff7c" // Marathi
const color6 = "#9b7cff" // Konkani
const color7 = "#d17cff" // Hindi
const color8 = "#" // Gujarati
const color9 = "#" // Marwari
const color10 = "#" // Oriya
const color11 = "#" // Bengali
const color12 = "#" // Punjabi
const color13 = "#" // Mizo
const color14 = "#" // Assamese
const color15 = "#" // Bhojpuri
const color16 = "#" // Manipuri
const color17 = "#" // Dogri (near Kashmir)


const color13 = "#" // Tulu

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

//const districtColorMap = { // Should override state colors
//	"Dakshina Kannada": 

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.st_nm])
		.append("title") // Tooltip
		.text(d => d.properties.district)
		.each(function(d) {
			map1.set(d.properties.district, 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.district+"Text")
      .text(d => d.properties.district);
}

d3.json("india_with_districts_without_states.json").then(drawMap)

console.log(map1)