// Define the div for the tooltip
var tooltipdiv = d3.select("body").append("div")	
  .attr("class", "tooltip")				
  .style("opacity", 0);


function drugBarGroup(chartArea){
	 d3.select('#drugBar-area').html('');
	var margin = {top: 20, right: 20, bottom: 30, left: 40},
    width = 960 - margin.left - margin.right,
    height = 500 - margin.top - margin.bottom;

var x0 = d3.scaleBand()
    .rangeRound([0, width]).padding(0.2);

var x1 = d3.scaleBand();

var y = d3.scaleLinear()
    .range([height, 0]);

var xAxis = d3.axisBottom()
    .scale(x0)
    .tickSize(0);

var yAxis = d3.axisLeft()
    .scale(y);
  

var color = d3.scaleOrdinal()
    .range(["#ca0020","#f4a582","#d5d5d5","#92c5de","#0571b0"]);

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 + ")");

d3.csv("drug1.csv", function(error, data) {
  if (error) throw error;
 
   // Format the data
  data.forEach(function(d) {
     d.s_category = d.s_category;
     d.drug_cat = d.drug_cat;
  });
  
  

  var categoriesNames = data.map(function(d) { return d.drug_cat; }).sort(function(a,b){return a - b});
  var rateNames = data.map(function(d) { return d.s_category; });
  

  x0.domain(categoriesNames);
  x1.domain(rateNames).rangeRound([0, x0.bandwidth()]);
  
  const nestedData = d3.nest()
  	.key(function(d){return d.drug_cat})
    .key(function(d){return d.s_category})
    .rollup(function(leaves) { return leaves.length; })
  	.entries(data);
  
  nestedData.forEach(function(d){
    d.values.sort(function(a,b){
      return a.value - b.value
    });
  });
 
  y.domain([0, d3.max(nestedData, function(s_category) { 
      return d3.max(s_category.values, 
                    function(d) { 
                        return d.value; }); })]);

  svg.append("g")
      .attr("class", "x axis")
      .attr("transform", "translate(0," + height + ")")
      .call(xAxis);

  svg.append("g")
      .attr("class", "y axis")
      .style('opacity','0')
      .call(yAxis)
  .append("text")
      .attr("transform", "rotate(-90)")
      .attr("y", 6)
      .attr("dy", ".71em")
      .style("text-anchor", "end")
      .style('font-weight','bold')
      .text("Value");

  svg.select('.y').transition().duration(500).delay(1300).style('opacity','1');

  var cat2 = nestedData.key;
  //var sum = d3.sum(data, (d) => d.count);
  var slice = svg.selectAll(".slice")
      .data(nestedData)
      .enter().append("g")
      .attr("class", "g")
      .attr("transform",function(d) { return "translate(" + x0(d.key) + ",0)"; });
 // var cat2 = slice.attr("d", function(d){return d.values}); 
 // console.log(cat2);
  
  slice.selectAll("rect")
      .data(function(d) { return d.values; })
  
  .enter().append("rect")
      .attr("width", x1.bandwidth())
      .attr("x", function(d) { return x1(d.key); })
    	
      .style("fill", function(d) { return color(d.key) })
      .attr("y", function(d) { return y(0); })
      .attr("height", function(d) { return height - y(0); })
      .on("mouseover", function(d) {
    			const parentData = d3.select(this.parentNode).datum();
          d3.select(this).style("fill", d3.rgb(color(d.key)).darker(2));
          tooltipdiv.transition().duration(200).style("opacity", .9);
          tooltipdiv.html("<strong>S Category: </strong>" + d.key +"<br>" +"<strong>Drug Category: </strong> " + parentData.key + "<br>" +"<strong>Count: </strong>" + d.value)	
          .style("left", (d3.event.pageX) + "px")		
          .style("top", (d3.event.pageY - 28) + "px");
      })
      .on("mouseout", function(d) {
          d3.select(this).style("fill", color(d.key));
         tooltipdiv.transition()		
          .duration(500)		
          .style("opacity", 0);	
      });
  
  

  slice.selectAll("rect")
      .transition()
      .delay(function (d) {return Math.random()*1000;})
      .duration(1000)
      .attr("y", function(d) { return y(d.value); })
      .attr("height", function(d) { return height - y(d.value); });
  
      // ======== Grouped bar text ========
/*
    let textOnBar = svg.selectAll("text")
      .data(function(d) {
        return nestedData[0].values.map(function(d) {
          return {y(d.value)};
        });
      });

    textOnBar = textOnBar
      .enter()
    .append("text")
      .attr("fill","#fff")
      .attr("font-size",11)
      .merge(textOnBar);

    textOnBar.transition().duration(durations)
      .attr("transform", function(d, i) {
        let x0 = x1.bandwidth() * i + 7,
            y0 = y(d.value) + 8;
        return "translate(" + x0 + "," + y0 + ") rotate(90)";
      })*/
  
  var textOnBar = svg.selectAll(".text")  		
	  .data(function(d) { return d.values; })
	  .enter()
	  .append("text")
	  .attr("class","label")
	  .attr("x", (function(d) { return xScale(d.key) + xScale.rangeBand() / 2 ; }  ))
	  .attr("y", function(d) { return yScale(d.value) + 1; })
	  .attr("dy", ".75em")
	  .text(function(d) { return d.value; });   	  
  
  
    //Legend
  var legend = svg.selectAll(".legend")
  //console.log(data[0]);
 //.data((function(nestedData) { return nestedData.key }))
  .data(nestedData[0].values.map(function(d) { return d.key; }).sort(function(a,b){return a - b}))
    //  .data(nestedData.values.map(function(d) { return d.key; })).reverse()
  //console.log(.data(nestedData.values.map(function(d) { return d.key; })).reverse())
  .enter().append("g")
      .attr("class", "legend")
      .attr("transform", function(d,i) { return "translate(0," + i * 20 + ")"; })
      .style("opacity","0");

  legend.append("rect")
      .attr("x", width - 18)
      .attr("width", 18)
      .attr("height", 18)
      .style("fill", function(d) { return color(d); });

  legend.append("text")
      .attr("x", width - 24)
      .attr("y", 9)
      .attr("dy", ".35em")
      .style("text-anchor", "end")
      .text(function(d) {return d; });

  legend.transition().duration(600).delay(function(d,i){ return 1300 + 100 * i; }).style("opacity","1");


  
});
  
  
	
}
drugBarGroup("#drugBar-area");