var margin = { top: 200, right: 50, bottom: 50, left: 50 },
  width = window.innerWidth - margin.left - margin.right,
  height = 1000 - margin.top - margin.bottom;

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

var projection = d3.geoAlbersUsa()
  .scale([width]);
var path = d3.geoPath(projection);
var counts = d3.map();
var regionMap = d3.map();
var years
var currentYear

var colors = d3.schemeBlues[9];
var colorScale = d3.scaleQuantize()
  .range(colors)
  .domain([1, 2]);
var logScale = d3.scaleLog()
  .range([1, 2]);
var scale = d => colorScale(logScale(d3.max([d, 1])));

function strong(text) {
  return "<strong>" + text + "</strong>"
}

var tip = d3.tip()
  .attr("class", "tip")
  .offset([-10, 0])
  .html(function (d) {
    var state = d.properties.name;
    var region = regionMap.get(state);
    var count = counts.get(state);

    return "State: " + strong(state) +
      "<br>Region: " + strong(region) +
      "<br>Year: " + strong(currentYear) +
      "<br>Earthquakes: " + strong(count) + "</span>";
  });

svg.call(tip)

function handleMouseOver(d) {
  d3.select(this)
    .attr("stroke-width", "3")

  tip.show(d);
}

function handleMouseOut(d) {
  d3.select(this)
    .attr("stroke-width", "1")

  tip.hide(d);
}

// Slider
var dataTime = d3.range(0, 6).map(function (d) {
  return new Date(2010 + d, 6, 6);
});

var sliderTime = d3
  .sliderBottom()
  .min(d3.min(dataTime))
  .max(d3.max(dataTime))
  .step(1000 * 60 * 60 * 24 * 365)
  .width(300)
  .tickFormat(d3.timeFormat('%Y'))
  .tickValues(dataTime)
  .default(new Date(2010, 6, 1))
  .on('onchange', val => {
    var newYear = d3.timeFormat('%Y')(val)
    if (newYear === currentYear) { return }

    d3.select('p#value-time').text(newYear);
    var datechange = new CustomEvent("datechange", { detail: { year: newYear }})
    d3.select('p#value-time').node().dispatchEvent(datechange)
  });

var gTime = d3
  .select('div#slider-time')
  .append('svg')
  .attr('width', 500)
  .attr('height', 100)
  .append('g')
  .attr('transform', 'translate(30,30)');

gTime.call(sliderTime);
d3.select('p#value-time').text(d3.timeFormat('%Y')(sliderTime.value()));


// Legends section
var legend = svg.append("g")
    .attr("class", "legend")
    .attr("transform", "translate(" + (width) + "," + 100 + ")");

  legend.append("text")
    .attr("class", "legend-title")
    .attr("text-anchor", "end")
    .text("Earthquake Frequency");

var promises = [
  d3.json("states-10m.json"),
  d3.csv("state-earthquakes.csv", function (d) {
    //counts.set(d.States, +d["Total Earthquakes"]);  // connect to slider??!!
    years = years || Object.keys(d)
      .filter(c => c.match(/^\d+$/))
      .sort()

    currentYear = years[0]
    counts.set(d.States, +d[currentYear]);
    regionMap.set(d.States, d.Region);
    return d
  })
];

function renderMap(topo, data) {
  logScale.domain([
    d3.max([d3.min(counts.values()), 1]),
    d3.max(counts.values())
  ]);

  var mapNodes = svg.selectAll("path")
    .data(topojson.feature(topo, topo.objects.states).features)

  mapNodes
    .enter()
    .append("path")
    // .attr("transform", "translate(" + (-200) + "," + height/2 + ")")
    .on("mouseover", handleMouseOver)
    .on("mouseout", handleMouseOut)
    .attr("stroke", "gray")
    .attr("d", path)
    .merge(mapNodes)
    .transition()
    .attr("fill", d => scale(counts.get(d.properties.name)))

  /* svg.append("path")
    .datum(topojson.mesh(topo, topo.objects.states, function(a, b) { return a !== b; }))
    .attr("class", "states")
    .attr("d", path)
    .attr("stroke", "red"); */

  svg.selectAll("path")
    .attr("transform", "translate(" + ((width - 950) / 2 - 100) + ", 0)");

  var size = 20;
  function yLoc(d, i) {
    return 10 + i * (size + 5);
  }

  var mapSquares = legend
    .selectAll(".square")
    .data(colors)

  mapSquares
    .enter()
    .append("rect")
    .attr("class", "square")
    .attr("width", size)
    .attr("height", size)
    .attr("x", -110)
    .attr("y", yLoc)
    .merge(mapSquares)
    .attr("fill", d => d);

  var mapFrequencies = legend
    .selectAll(".legend-text")
    .data(colors)

  mapFrequencies
    .enter()
    .append("text")
    .attr("class", "legend-text")
    .attr("alignment-baseline", "middle")
    .attr("x", -80)
    .attr("y", yLoc)
    .attr("dy", size / 2)
    .merge(mapFrequencies)
    .text(d => Math.round(logScale.invert(colorScale.invertExtent(d)[0])));
}


Promise.all(promises).then(function ([topo, data]) {
  d3.select('p#value-time').node().addEventListener("datechange", function (event) {
    currentYear = event.detail.year
    data.forEach(s => counts.set(s.States, +s[currentYear]))
    renderMap(topo, data)
  })

  renderMap(topo, data)
});