const margin={top:50,right:50,bottom:50,left:50},
      width=900-margin.left-margin.right,
      height=400-margin.top-margin.bottom;

const gridSize = Math.floor(width / 200);

const click = d3.select(".plot").append("g").attr("class","button");
    

const svg = d3.select('.plot')
              .append('svg')
              .attr('width', width + margin.left + margin.right)
              .attr('height', height + margin.top + margin.bottom)
              .append('g')
              .attr('transform', 'translate(' + margin.left + ',' + height/2 + ')');

const group=svg.append("g")
                 
const bg=group.append("rect")
                .attr("x", (d)=> { return 0; })
                .attr("y", (d)=> { return 0; })
                .attr("width", width)
                .attr("height", gridSize*24)
                .attr("fill","black");

const heatMap = group.append("g").attr("class","heatmap");


//x scale
const dateStart=new Date(2016,07,01),dateEnd=new Date(2017,01,24);
const x = d3.scaleTime().range([0, width]).domain([dateStart,dateEnd]);
const xAxis = d3.axisBottom(x);

//y scale
const y = d3.scaleLinear().range([gridSize*24,0]).domain([0,24]);
const yAxis = d3.axisLeft(y).tickValues([0,6,12,18,24]);

const x_Axis=svg.append("g")
    .attr("class","x-axis")
    .call(xAxis)
    .attr("transform","translate("+0+","+gridSize*24+")")
    .selectAll("text")
    .attr("transform","rotate(30)")
    .style("text-anchor","strat")
    .attr("dx", "1.5em")
    .attr("dy", "1em")
    
const y_Axis=svg.append("g")
    .attr("class","y-axis").call(yAxis).selectAll(".tick")
    .attr("stroke-width",0.2)
    .select("text")
//    .attr("transform","translate("+(-width-gridSize*2)+","+0+")")
    .style("text-anchor","end");
   
//color scale
const colorScale = d3.scaleLinear()
    .range(["#1a1a1a","#f2f2f2"]); 



///load in data/
d3.queue()
  .defer(d3.json,"user1.json")
  .defer(d3.json,"user2.json")
  .await(ready);

function ready (error,user1,user2) {
	 if (error) throw error;
    
        
    
//create bottom click
const dataset=[user1,user2];
    drawHeatMap(dataset[0])
    
const button=["user1","user2"];
click
    .selectAll("button").data(button).enter()
    .append("button").attr("id",(d,i)=>{return d}).append("text").text((d)=>{return d})
    .on("click",(d)=>{
    
    const index=button.indexOf(d),
          data=dataset[index];
    
    drawHeatMap(data);
    

    });

}




function drawHeatMap(d){


//////////////////////draw rect//////////////////////////////////

    const formatTime = d3.timeFormat("%B %d, %Y");
    const time=formatTime(new Date(d[0].date));
    console.log(new Date(time))
//color domain
    colorScale.domain(d3.extent(d,(d,i)=>{return d.count}))
    console.log(colorScale.domain());
    
//heatmap

    //enter  
    const update=heatMap.selectAll("rect").data(d);
    
    //update
    update
    .enter()
    .append("rect").attr("id","cards")
    .attr("x", (d)=>{ return x(new Date(formatTime(new Date(d.date)))); })
    .attr("y", (d)=>{ return y(d.hour+1); })
    .attr("width", gridSize)
    .attr("height", gridSize)
    .style("fill",(d)=>{return colorScale(d.count)})
    .merge(update).transition().duration(800)
    .style("fill",(d)=>{return colorScale(d.count)});
    
    update.exit().remove();

//hover over tooltip
    
}