/**
 * Calculate annual runoff
 * @param {array} data Flow data
 * @param {range} array Year range of data
 * @return {array} Annual runoff values
 */
function annualRunoff(data, range) {
    var runoffs = {};
    var getYear = d3.timeParse('%Y');
    const parseDate = d3.timeParse('%Y-%m-%d');

    var length = data.length;
    for (var i = 0; i < length; i ++) {
        let dateObj = new Date(data[i].d);
        let year = dateObj.getFullYear();
        runoffs[year] = runoffs[year] || 0;
        runoffs[year] += data[i].v;
    }

    var annualRunoffs = [];
    for (var y = range[0]; y <= range[1]; y ++) {
        // Fill in gaps in the years
        if (runoffs[y] === undefined) {
            annualRunoffs.push({
                d: parseDate(y + '-01-01'),
                v: null,
            });
            continue;
        }

        // Calculate the values
        annualRunoffs.push({
            d: parseDate(y + '-01-01'),
            v: runoffs[y] * 86400,
        });
    }

    // Sort the data by month
    annualRunoffs.sort(function(a, b) {
        return a.d - b.d;
    });

    return annualRunoffs;
}

async function formatData(data) {
  const yearlyData = annualRunoff(data, [1989, 2012]);
//   console.log(yearlyData)
  return yearlyData;
}



function renderYearsChart(data) {
      // Define the scales
    var xScaleLog = d3.scaleLog()
        .clamp(true);
  
    var xAxis = d3.axisTop()
        .scale(xScaleLog)
        .tickSize('4')
        .ticks(2, function(d) {
            var superScript = ['⁰', '¹', '²', '³', '⁴', '⁵', '⁶', '⁷', '⁸', '⁹'];
            if (d < 1000) {
                return d;
            }
            var exponent = d3.format('.1e');
            var values = exponent(d).toString().split('e+');
            var superString = '';
            for (var i in values[1]) {
                superString += superScript[parseInt(values[1][i],10)];
            }
            return values[0] + 'x10' + superString;
        });
  
  function brushed() {
    console.log('brushed...');
  }
  
  var yScaleTime = d3.scaleTime();
  
      var yAxis = d3.axisLeft()
        .scale(yScaleTime)
//         .orient('left')
        .ticks(d3.timeYear)
        .tickFormat(d3.timeFormat('%Y'))
        .tickSize('4');
  
      var brush = d3.brushY()
//         .y(yScaleTime)
//         .extent([[0, 0], [width, height2]])
        .on('brush end', brushed);
   
//   brush.clear();
  
  const width = 500;
  const height = 500;
  
  const parseDate = d3.timeParse('%Y-%m-%d');
  
  // Set the range and domain of the scales
  yScaleTime.range([0, height]);
  var first = d3.timeYear(data[0].d);
  var lastVal = new Date(data[data.length - 1].d);
  var last = d3.timeDay.offset(d3.timeYear.offset(lastVal, 1), -1);
  yScaleTime.domain([first, last]);
  
if (data.length <= 10) {
    yAxis.ticks(d3.timeYears, 1);
} else if (data.length > 10 && data.length <= 30) {
    yAxis.ticks(d3.timeYears, 2);
} else if (data.length > 30 && data.length <= 60) {
    yAxis.ticks(d3.timeYears, 3);
} else if (data.length > 60) {
    yAxis.ticks(d3.timeYears, 5);
}
  
  const margin = {
    top: 30,
    bottom: 30,
    left: 30,
    right: 30,
  };
  
  xScaleLog.range([0, width]);
  xScaleLog.domain([0, 100]).nice();
  
  // Create the svg
const svg = d3.select('#year-chart').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 + ')');
  
// Create the axis
svg.append('g')
    .attr('class', 'x axis')
    .call(xAxis)
    .selectAll('.tick text')
    .style('text-anchor', 'start');
// svg.append('g')
//     .attr('class', 'y axis')
//     .call(yAxis);
// Draw the bar chart
var barLayer = svg.append('g')
    .attr('class', 'bar-layer');  
drawBars(barLayer, data);  
 
  function drawBars(layer, data) {
    var bars = layer.selectAll('.bar.annual')
        .data(data);

    bars.enter().append('rect')
        .attr('class', 'bar annual')
        .attr('y', function(d) {return yScaleTime(d3.timeMonth.offset(new Date(d.d),1));})
        .attr('height', function(d) { return yScaleTime(d3.timeMonth.offset(d3.timeYear.offset(new Date(d.d),1), -2)) - yScaleTime(d.d); });

    bars.transition()
        .attr('x', function() { return xScaleLog(0); })
        .attr('width', function(d) { return xScaleLog(d.v); });
}
  
}