// This is an example Chaism plugin that uses D3 to make a Choropleth Map. 
// Draws from this Choropleth example http://bl.ocks.org/mbostock/4060606
function Choropleth() {

  var my = ChiasmComponent({
    colorColumn: Model.None,
    idColumn: Model.None,
    topoDataIdProperty: Model.None,
    stroke: "gray",
    strokeWidth: "1px",
    scale: 1280
  });

  var quantize = d3.scale.quantize();
  var projection = d3.geo.albersUsa();
  var geoPath = d3.geo.path()
    .projection(projection);

  my.el = document.createElement("div");
  var svg = d3.select(my.el).append("svg");
  var g = svg.append("g");

  my.when("box", function (box) {
    svg
      .attr("width", box.width)
      .attr("height", box.height);
  });

  my.when(["data", "idColumn", "colorColumn", "topoDataIdProperty"],
      function (data, idColumn, colorColumn, topoDataIdProperty){

    if(colorColumn === Model.None) return;
    if(idColumn === Model.None) return;
    if(topoDataIdProperty === Model.None) return;

    quantize.domain(d3.extent(data, function (d) { return d[colorColumn]; }));

    // Grays from http://bl.ocks.org/mbostock/5577023
    // TODO move this to config.
    quantize.range(["#f7f7f7","#cccccc","#969696","#636363","#252525"]);

    var valueById = d3.map();
    data.forEach(function(d) {
      valueById.set(d[idColumn], d[colorColumn]);
    });

    my.fill = function(d) {
      var id = d.properties[topoDataIdProperty];
      return quantize(valueById.get(id));
    };
  });

  my.when(["topoData", "fill", "box", "scale", "stroke", "strokeWidth" ],
      function (topoData, fill, box, scale, stroke, strokeWidth){

    projection.scale(scale);
    projection.translate([box.width / 2, box.height / 2]);

    var topoDataObjectName = "State_2010Census_DP1";
    var topoDataObject = topoData.objects[topoDataObjectName];
    var features = topojson.feature(topoData, topoDataObject).features;

    var path = g.selectAll("path").data(features);

    path.enter().append("path");
    path.exit().remove();
    path
      .attr("d", geoPath)
      .attr("fill", fill)
      .attr("stroke", stroke)
      .attr("stroke-width", strokeWidth);
  });

  return my;
}