import {data,keys,year} from './level_graph_by_year_data.js';
//https://observablehq.com/@d3/stacked-normalized-horizontal-bar
//https://observablehq.com/@d3/normalized-stacked-area-chart
//https://codepen.io/benlister/pen/bNeLQy
//https://data-analytics.github.io/Normalized-Stacked-Barchart/
console.log(data);
var colors = ["#C9CaD9","#D1D2F9","#A3BCF9","#7796CB","#576490","#835790"];

var color = d3.scaleOrdinal()
	.range(colors)

var programs_all = [];//just a list of programs for the x-axis labels and for the x-axis domain
data.forEach(function(d){
	programs_all.push(d.program);
});
/*
var keys = Object.keys(data[0]);//assumes each object has the same keys, i.e., here all 4 years
keys.shift();//list of academic years covered by the data

var year = "2015-16";
var level_count = Object.keys(data[0][year]).length;//list of levels
*/
// '''''''''''''''''''''''''''' new data array for data check ''''''''''''''''''''''''''
/*
var sumValues = obj => Object.values(obj).reduce((a,b) => a + b);//to get the sum across levels

var data_etoePerc = [];//modified main dataset that changes the numbers to percentages of total
data.forEach(function(d,j){
	var data_sum = {"program":d.program};
	for(i=0;i<keys.length;i++){
		try{
			var year_data = d[keys[i]];
			var levels_object = {};
			data_sum[keys[i]] = levels_object;
			levels_object["sum"] = sumValues(year_data);
			for(k=0;k<level_count;k++){
				var level = k.toString();
				levels_object[k]=(100*year_data[k]/levels_object["sum"].toFixed(2));
				}
			levels_object["e-toe"] = 100 - levels_object["0"];
			}catch(err){};
	}
	data_etoePerc[j] = data_sum;
});
*/
// '''''''''''''''''''''''''''''''''''''''''''''''''console.log for data check
function data_check(){
	data_etoePerc.forEach(function(d,j){
	for(var k=0;k<keys.length;k++){
		console.log(d.program +": "+ keys[k]+": "+d[keys[k]]["e-toe"]+"%");
	}
	console.log("");
	});
}

// ''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''

var data_by_year = [];//list of year data objects (currently 4); the last for programs have no "data" key for the first 3 years; one stacked bar chart for each year. 19+ bars for each chart; x-axis: programs
for(var i=0;i<keys.length;i++){
	var year_object = {};
	year_object["year"] = keys[i];
	var year_data = [];
	data.forEach(function(d,j){
		var datum = {};
		datum = { ...d[keys[i]]};//cloning the object ... can't simply assign or else changes will propagate
		datum["program"] = d.program;
		year_data.push(datum);
		});
	year_object["data"] = year_data;
	data_by_year.push(year_object);
};

var data_by_program = [];//list of program data objects; one stacked barchart (one bar each full academic year) for each program; 4 bars for each chart (x-axis: years)
data.forEach(function(d,j){
	var program_object = {};
	program_object["program"] = d.program;
	var data = [];
	for(var i=0;i<keys.length;i++){
		var datum = { ...d[keys[i]]};//again need to clone
		if(keys[i] in d){
		datum["year"] = keys[i];
		data.push(datum);}
	}
	program_object["data"] = data;
	data_by_program.push(program_object);
});

//******************************************


//color
color.domain(// associate each level with a color??
	d3.keys(data_by_program[0]["data"][0]).filter(function(key){
		return key != "year";
	})
);
//*******************

data_by_year.forEach(function(d){//this modifies "data" for each year so each object (program object) now includes a "rates" key which provides data for rectangles
	d["data"].forEach(function(d) {
		var y0= 0;
		d.rates = color.domain().map(function(name) {//name is one of the keys
		//console.log();
			return {
				name: name,
				y0: y0,
				y1: (y0 += +d[name]),
				tally: d[name],
				year: d.year
					};
				});
		d.rates.forEach(function(d) {
				d.y0 /= y0/100;
				d.y1 /= y0/100;
			});
});
})

data_by_year.forEach(function(d){//to calculate ranking
	d["data"].forEach(function(e){
		e["sum"]= e["0"] + e["1"] + e["2"] + e["3"] + e["4"] + e["5"];
		e["percent_for_5"] = (100*e["5"]/e["sum"]).toFixed(2);
		e["percent_for_0"] = (100*e["0"]/e["sum"]).toFixed(2);
	})
})


//*********************** sorting ********************
data_by_year.forEach(function(d){//programs are ordered under each year
	d["data"].sort(function (a, b) {
				return a.percent_for_0 - b.percent_for_0;
			});
})

//********************

function find_data_for_year(year){//This filters the data so null sets are left out
	var y_object = data_by_year.find(o => o.year === year);
  console.log(y_object);
	var data = y_object.data;
	var filtered_data = data.filter(function(e){
		return !isNaN(e.rates[0].y0);
	})
	return filtered_data;
}

//*************************** xaxis list

function programs_for_Xaxis(year){
		var y_data = find_data_for_year(year);
		console.log(y_data.length);
		var programs = [];
		y_data.forEach(function(d){
			programs.push(d.program);});
		return programs;
};//just a list of programs for the x-axis labels and for the x-axis domain

//console.log(programKeys("2018-19"));
//********************************

var margin = {top: 90, right: 20, bottom: 100, left: 45},
	width = 800 - margin.left - margin.right,
	height = 600 - margin.top - margin.bottom;

//scales
//https://observablehq.com/@d3/d3-scaleband
var y = d3.scaleLinear()
	.domain([0,100])
	.range([height, 0]);

//axes
var yAxis = d3.axisLeft()
	.scale(y)
	.ticks(10)
	.tickFormat(function(d){return d+"%";});

var div = d3.select("body").append("div")
	    .attr("class", "tooltip")
	    .style("opacity", 0);

var svg = d3.select("body")
    .append("svg")
        .attr("width", width + margin.left + margin.right)
        .attr("height", height + margin.top + margin.bottom)
    .append("g")
        .attr("transform",
              "translate(" + margin.left + "," + margin.top + ")");

// Add the Y Axis
    svg.append("g")
        .attr("class", "y axis")
				.attr("transform", "translate(50, -10)")
        .call(yAxis);
//guidelines
var glineFunction = d3.line()
		.x(function(d) { return d.x + 5; })
		.y(function(d) { return y(d.y) +.5; });

var guidline_data = [];
for(i=1;i<11;i++){
			var ptX1 = 0;
			var ptY1 = i*10;
			var ptX2 = width;
			var ptY2 = i*10;
			guidline_data.push([{"x":ptX1,"y":ptY1},{"x":ptX2,"y":ptY2}]);
						}

guidline_data.forEach(function(d,i){
			svg.append("path") //for the line under the dataset name
					.attr("class", "gline")
					.style('stroke-width',1)
					.attr("stroke","steelblue")
					.attr("d", glineFunction(d))
					.attr("transform", "translate(50, -10)")
					.style("opacity",.2);
				});


//****************************** initialize the x axis according to 2015-16
var x = d3.scaleBand()
	.domain(programs_for_Xaxis("2015-16"))
	.rangeRound([0, width])
	.paddingOuter(.5)
	.paddingInner(0);
var xAxis = d3.axisBottom().scale(x);
svg.append("g")
		.attr("class", "x axis")
		.attr("id","xAxis")
		.attr("transform", "translate(50," + (height-10) + ")")
		.call(xAxis);

function build_bars(year){
	var bar_data = find_data_for_year(year);//ordered data for the year
	var programs_Xaxis = programs_for_Xaxis(year);//only the programs for which there's data for that year

	d3.selectAll("#xAxis")//needs to be completely removed and rebuilt
			.remove();

	var x = d3.scaleBand()
		.domain(programs_Xaxis)//new domain, according to year (latest years, more programs)
		.rangeRound([0, width])
		.paddingOuter(.5)
		.paddingInner(0);
	var xAxis = d3.axisBottom().scale(x);
	svg.append("g")
			.attr("class", "x axis")
			.attr("id","xAxis")
			.attr("transform", "translate(50," + (height-10) + ")")
			.call(xAxis);


	var yr = svg.selectAll(".program")
					.data(bar_data)
					.enter()
					.append("g")
					.attr("class", "pr")
					.attr("transform", function (d) {
							return "translate(" + x(d.program) + ",0)";
							});

  var s = d3.selectAll(".bar")//This is necessary to reset the bars upon the loading of each program data set
		.attr("height",0);
//https://fabiofranchino.com/blog/the-new-d3.js-join-method-is-awesome-for-t/
	var dat = yr.selectAll("rect").data(function (d) {
								return d.rates;})
							.join("rect")//instead of .enter.append("rect")
							.style("cursor","pointer")
							.attr("class","bar")
							.attr("width", (x.bandwidth()-10))
							//.transition().duration(250)
							.attr("y", function (d) {
								return y(d.y1);})
							.attr("height", function (d) {
								return y(d.y0) - y(d.y1);
							})
							.style("fill", function (d) {
								return color(d.name);})
							.attr("transform", "translate(55, -10)")
							.attr("id",function(d){return "rect_"+d.name+"_"+d.year;})
							.attr("bX",function(){
									var bX = d3.select(this).node().getBoundingClientRect().x;
									return bX;
								})
							.attr("bY",function(){
										var bY = d3.select(this).node().getBoundingClientRect().y;
										return bY;
									})
							.attr("H",function(){
												var H = d3.select(this).node().getBoundingClientRect().height;
												return H;
											})
							.on("mouseover", function(d) {
								var bX = d3.select(this).attr("bX");
								var bY = d3.select(this).attr("bY");
								var H = d3.select(this).attr("height");
								//console.log(bX);
								div.transition()
									.duration(200)
									.style("padding-top","4px")
									.style("opacity", .9);
								div.html(function(){
									if(d.name == "0"){
										return "puudub " + "<br>"+(d.y1-d.y0).toFixed(2)+"%";
										}
										return "tase "+d.name + "<br>"+(d.y1-d.y0).toFixed(2)+"%";
											})
									.style("left", parseInt(bX) + .5*x.bandwidth() - 67 + "px")
									.style("top", parseInt(bY) + .5*parseInt(H) -20 + "px");
								})
							.on("mouseout", function(d) {
								div.transition()
									.duration(500)
									.style("opacity", 0);
							});
}//end of function build_bars
build_bars("2015-16");

//************************''''''''''''''''''''''''''''''''''''''''''''end of build '''''''''''''''''''''''''''''''

var legend = svg.selectAll(".legend")
			.data(color.domain().slice().reverse())
			.enter()
			.append("g")
			.attr("class", "legend")
			.attr("transform", function (d, i) {
				return "translate(" + (i * -80 -100) + ",433)";
			});


legend.append("rect")
			.attr("class","r_legend")
			.attr("x", width + -63)
			.attr("width", 20)
			.attr("height", 10)
			.style("fill", color);

legend.append("text")
			.attr("class","noselect")
			.attr("x", width - 40)
			.attr("y", 5).attr("width", 40)
			.attr("dy", ".35em")
			.style("text-anchor", "start")
			.text(function (d) {
				if(d=="0"){
					return "puudub";
				};
				return "level "+d;
			});
//*********************'''''''''''''''''''''''''''''''***************************************
			// Handler for dropdown value change


function dropdownChange(){
	var new_year = d3.select(this).property('value');
	build_bars(new_year);
};

var dropdown = d3.select("body")
			.insert("select", "svg")
			.on("change", dropdownChange);

dropdown.selectAll("option")
			.data(keys)
			.enter()
			.append("option")
			.attr("value", function (d) { return d; })
			.text(function (d) {
			    return d;
				});