// Modified From: http://www.d3noob.org/2013/02/add-html-table-to-your-d3js-graph.html
// Added row-even, row-odd
function tabulate(data, columns, divId) {
  if (divId) {
    var table = d3.select(divId).append("table");
  } else {
    var table = d3.select("#tables").append("div").append("table");
  }
  if (! columns) {
    columns = Object.keys(data[0]);
  }
  table.attr("style", "margin-left: 20px");



  var thead = table.append("thead");
  var tbody = table.append("tbody");

  // append the header row
  columns.unshift(0);
  columns[0] = ""

  thead.append("tr")
    .selectAll("th")
    .data(columns)
    .enter()
    .append("th")
    .text(function(column) {
      return column;
    });

  columns.shift(0)

  // create a row for each object in the data
  var rows = tbody.selectAll("tr")
    .data(data)
    .enter()
    .append("tr");

  rows.append("td").html(function(d, i) {
    return i;
  })

  // create a cell in each row for each column
  var cells = rows.selectAll("td.value")
    .data(function(row) {
      return columns.map(function(column) {
        return {
          column: column,
          value: row[column]
        };
      });
    })
    .enter()
    .append("td")
    //.attr("style", "font-family: Courier")
    .html(function(d) {
      return d.value;
    });

  return table;
}

function join(lookupTable, mainTable, lookupKey, mainKey, select) {
  var l = lookupTable.length,
    m = mainTable.length,
    lookupIndex = [],
    output = [];
  for (var i = 0; i < l; i++) { // loop through l items
    var row = lookupTable[i];
    lookupIndex[row[lookupKey]] = row; // create an index for lookup table
  }
  for (var j = 0; j < m; j++) { // loop through m items
    var y = mainTable[j];
    var x = lookupIndex[y[mainKey]]; // get corresponding row from lookupTable
    output.push(select(y, x)); // select only the columns you need
  }
  return output;
};

function processData(errors, data, abbrvs) {
  data = data.filter(function(d) {
    return d.SUMLEV == 40;
  })
  data = data.filter(function(d) {
    return d.NAME != "Puerto Rico";
  })

  //tabulate(data);
  
  var regionCount = d3.nest()
  .key(function(d) { return d.REGION; })
  .rollup(function(v) { return v.reduce(function(s,d) { return s+(+d.CENSUS2010POP); },0); })
  .entries(data);
  
  tabulate(data, ["SUMLEV", "STATE", "NAME", "CENSUS2010POP"]);
  
  // data.forEach(function(row) {
  // 	var result = abbrvs.filter(function(abbrv_row) {
  // 	    return row.NAME == abbrv_row.State;
  // 	});

  // 	row.ABBRV = result[0].Abbreviation;
  // });

  data = join(data, abbrvs, "NAME", "State", function(a, d) {
    return {
      SUMLEV: d.SUMLEV,
      NAME: d.NAME,
      ABBRV: a.Abbreviation,
      CENSUS2010POP: +d.CENSUS2010POP
    };
  });

  // do min, max, mean somehow
  var minPop = d3.min(data, function(d) {
    return d.CENSUS2010POP;
  });
  console.log(minPop);

  var maxPop = d3.max(data, function(d) {
    return d.CENSUS2010POP;
  });
  console.log(maxPop);

  var popExtent = d3.extent(data, function(d) {
    return d.CENSUS2010POP;
  });
  console.log(popExtent);

  // d3.nest?
  var nested = d3.nest().key(function(d) {
      return d.ABBRV;
    })
    .map(data)

  console.log(nested);

  // sort
  data.sort(function(a, b) {
    return b.CENSUS2010POP - a.CENSUS2010POP;
  });

  tabulate(data, ["SUMLEV", "NAME", "ABBRV", "CENSUS2010POP"]);
  tabulate(abbrvs, ["State", "Abbreviation"]);
}

d3.queue()
  .defer(d3.csv, "http://www.cis.umassd.edu/~dkoop/cis468-2017sp/data/census-est-2014.csv")
  .defer(d3.csv, "http://www.cis.umassd.edu/~dkoop/cis468-2017sp/data/st-abbrv.csv")
  .await(processData);