import {data,keys} from './level_graph_data.js';
//console.log(data);
//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/

var colors = ["#C9CaD9","#D1D2F9","#A3BCF9","#7796CB","#576490","#835790"];
//var color = d3.scaleOrdinal(d3.schemeDark2);

var color = d3.scaleOrdinal()
	.range(colors)
//console.log(data);
var programs_all = [];//just a list of programs for the y-axis labels
data.forEach(function(d){
	programs_all.push(d.program);
});

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

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)
//console.log("data: "+JSON.stringify(data));
data.forEach(function(d,j){
	//console.log(d);
	var program_object = {};
	program_object["program"] = d.program;
	var data = [];
	for(i=0;i<keys.length;i++){
		var datum = { ...d[keys[i]]};//again need to clone
		//console.log("datum: "+JSON.stringify(datum));
		if(keys[i] in d){
		datum["year"] = keys[i];
		data.push(datum);}
	}
	program_object["data"] = data;
	data_by_program.push(program_object);
});


//total number of charts: 4 (one for each year) + 19+ (one for each program) = 23+; first choice: by academic year or by program; respective labels appear: academic years (x-axis: programs) or programs (x-axis: academic years); this time need to rescale x-axis enter-remove data ...

var margin = {top: 110, right: 20, bottom: 100, left: 45},
	width = 600 - 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]);

var x = d3.scaleBand()
	.domain(keys)//this apparently has to be set before the axis call
	.rangeRound([0, width])
	.paddingOuter(.4)
	.paddingInner(.1);

//axes
var xAxis = d3.axisBottom().scale(x);
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 X Axis
    svg.append("g")
        .attr("class", "x axis")
        .attr("transform", "translate(50," + (height-10) + ")")
        .call(xAxis);
// 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 = 700;
			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);
				});




//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_program.forEach(function(d){//this modifies "data" for each program so each 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;
			});
});
})


//***********************''''''''''''''''''''''''''''''' build the bar chart '''''''''''''''''''''''''
var AT_data = data_by_program[0]["data"];

function find_data_for_program(program){
	var p_object = data_by_program.find(o => o.program === program);
	return p_object["data"]
}

function programYearKeys (program){
		var data = find_data_for_program(program);
		var keys = []
		data.forEach(function(d){
			var year = d.year;
			keys.push(year);
		});
		return keys;
}

function build_bars(program){
	var bar_data = find_data_for_program(program);
	//console.log("bar_data: "+program+" "+JSON.stringify(bar_data));
	var yr = svg.selectAll(".year")
					.data(bar_data)
					.enter()
					.append("g")
					.attr("class", "yr")
					.attr("transform", function (d) {
							return "translate(" + x(d.year) + ",0)";
							});

  var s = d3.selectAll(".bar")
		.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()))
							//.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(50, -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() - 27 + "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("AE");

//************************''''''''''''''''''''''''''''''''''''''''''''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 + ",413)";
			});


legend.append("rect")
			.attr("class","r_legend")
			.attr("x", width + -53)
			.attr("width", 10)
			.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_program = d3.select(this).property('value');
	build_bars(new_program);
};

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

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