// Transpiled with Babel
"use strict";

var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

var display = d3.select("#display");
var label = d3.select("#label");

// STARTUP (parse CSV)
d3.csv("planet-data.csv", row, start);

function row(d) {
  return {
    name: d.Body,
    radius: +d["Mean radius (km)"]
  };
}

function start(d) {
  var planets = new planetDisplay(d);
  planets.initDisplay();

  // On click, transition to other scale
  d3.select(document).on("click", planets.updateDisplay.bind(planets));
}

// TODO: use scale instead of radius (more efficient transitions)
// also clean up this mess...

var planetDisplay = function () {
  function planetDisplay(data) {
    _classCallCheck(this, planetDisplay);

    this.data = data;
    this.xSum = 0;
    this.spacing = 2;
    this.currentScale = "linear";
    this.radiusData = data.map(function (datum) {
      return datum.radius;
    });
    this.rScale = d3.scaleLinear().domain(d3.extent(this.radiusData)).range([0.1, 1.5]);
  }

  // Changes scale to linear (if currentScale is log), or to log (if currentScale is linear)


  _createClass(planetDisplay, [{
    key: "toggleScale",
    value: function toggleScale() {
      if (this.currentScale === "linear") {
        this.rScale = d3.scaleLog().domain(d3.extent(this.radiusData)).range([0.1, 1.5]);
        this.currentScale = "log";
      } else {
        this.rScale = d3.scaleLinear().domain(d3.extent(this.radiusData)).range([0.1, 1.5]);
        this.currentScale = "linear";
      }
      label.attr("value", this.currentScale);
    }

    // Calculates x-coordinate of a sphere given radius and index

  }, {
    key: "positioner",
    value: function positioner(d, i) {
      var currentRadius = this.rScale(d.radius);
      var previousRadius;
      if (i === 0) {
        previousRadius = 0;
      } else {
        previousRadius = this.rScale(this.data[i - 1].radius);
      }

      // (previousRadius + currentRadius) has spheres touching, (spacing) ensures separation
      this.xSum += previousRadius + currentRadius + this.spacing;
      var x = this.xSum;
      var y = currentRadius;
      var z = 0;
      return x + " " + y + " " + z;
    }
  }, {
    key: "centerDisplay",
    value: function centerDisplay() {
      var _this = this;

      display.attr("position", function () {
        var x = -(_this.xSum / 2) - 2;
        var y = 0;
        var z = -7;
        return x + " " + y + " " + z;
      });
    }
  }, {
    key: "initDisplay",
    value: function initDisplay() {
      var _this2 = this;

      display.selectAll("a-sphere").data(this.data).enter().append("a-sphere").attr("position", this.positioner.bind(this)).attr("src", function (d) {
        return "#" + d.name.toLowerCase();
      }
      //.attr("radius", (d) => this.rScale(d.radius))
      // Radius is encoded in scale (for performance)
      ).attr("scale", function (d) {
        var radius = _this2.rScale(d.radius);
        return radius + " " + radius + " " + radius;
      });

      this.centerDisplay();
    }
  }, {
    key: "updateDisplay",
    value: function updateDisplay() {
      this.xSum = 0;
      this.toggleScale();

      var self = this;
      display.selectAll("a-sphere").data(this.data).attr("position", this.positioner.bind(this));

      display.selectAll("a-sphere").data(this.data).transition().duration(2000
      //              .attrTween("radius", function (d, i) {
      //                var el = d3.select(this);
      //                var oldRadius = AFRAME.utils.coordinates.stringify(el.attr("radius"));
      //                return d3.interpolate(oldRadius, self.rScale(d.radius));
      //              })
      ).attrTween("scale", function (d, i) {
        var el = d3.select(this);
        var oldScale = AFRAME.utils.coordinates.stringify(el.attr("scale"));
        var newScale = self.rScale(d.radius);
        newScale = newScale + " " + newScale + " " + newScale;
        return d3.interpolate(oldScale, newScale);
      });

      this.centerDisplay();
    }
  }]);

  return planetDisplay;
}();