// Get the width and heigh of the SVG element.
var width = +document.getElementById('svg').clientWidth,
  height = +document.getElementById('svg').clientHeight;

var svg = d3.select("svg")
  .call(d3.zoom().scaleExtent([0.0001, 1000000]).on("zoom", function () {
    svg.attr("transform", d3.event.transform);
  }))
  .append("g");


var div = d3.select("body").append("div")
  .attr("class", "tooltip")
  .style("opacity", 0);

var brush = d3.brush()
  .extent([[-9999999, -9999999], [9999999, 9999999]])
  .on("end", brushEnded);

svg.append("g")
  .attr("class", "brush")
  .call(brush);

var intercom = Intercom.getInstance();

intercom.on("select", unSelectNodes);

var nodes, // as in Data points
  node, // as in SVG object that have all small circles on screen
  props,
  norm,
  p1 = 0,
  p2 = 0,
  size,
  distanceFunction,
  simulation,
  velocities = [],
  rendering = true, // Rendering during the execution.
  forceName = "forces",
  springForce = false,
  tooltipWidth = 0,
  fileName = "",
  selectedData,
  clickedIndex = -1,
  paused = false;

// Default parameters
var MULTIPLIER = 50,
  PERPLEXITY = 30,
  LEARNING_RATE = 10,
  NEIGHBOUR_SIZE = 6,
  SAMPLE_SIZE = 3,
  PIVOTS = false,
  NUM_PIVOTS = 3,
  ITERATIONS = 300,
  FULL_ITERATIONS = 20,
  NODE_SIZE = 10,
  COLOR_ATTRIBUTE = "",
  SELECTED_DISTANCE = 10,
  FULL_NEIGHBOUR_SIZE = 6,
  FULL_SAMPLE_SIZE = 3,
  FULL_SELECTED_DISTANCE = 10;

// Create a color scheme for a range of numbers.
var color = d3.scaleOrdinal(d3.schemeCategory10);

/**
 * Parse the data from the provided csv file using Papa Parse library
 * @param  {file} evt - csv file.
 */
function parseFile(evt) {
  // Clear the previous nodes
  d3.selectAll(".nodes").remove();
  springForce = false;

  fileName = evt.target.files[0].name;

  Papa.parse(evt.target.files[0], {
    header: true,
    dynamicTyping: true,
    skipEmptyLines: true,
    complete: function (results) {
      processData(results.data, results.error);
    }
  });
}

/**
 * Process the data and pass it into D3 force simulation.
 * @param  {array} data
 * @param  {object} error
 */
function processData(data, error) {
  if (error) throw error.message;

  nodes = data;
  size = nodes.length;
  simulation = d3.forceSimulation();

  // Calculate normalization arguments and get the list of
  // properties of the nodes.
  norm = calculateNormalization(nodes); // Used with distance fn
  props = Object.keys(nodes[0]); // Properties to consider by distance fn
  COLOR_ATTRIBUTE = props[props.length-1];

  var opts = document.getElementById('color_attr').options;

  props.forEach(function (d) {
    opts.add(new Option(d, d, (d === COLOR_ATTRIBUTE) ? true : false));
  });
  opts.selectedIndex = props.length-1;

  props.pop(); //Hide Iris index / last column from distance function

  //Put the nodes in random starting positions
  nodes.forEach(function (d) {
    d.x = (Math.random()-0.5) * 100000;
    d.y = (Math.random()-0.5) * 100000;
  });

  // Add the nodes to DOM.
  node = svg.append("g")
    .attr("class", "nodes")
    .selectAll("circle")
    .data(nodes)
    .enter().append("circle")
    .attr("r", NODE_SIZE)
    .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")")
    // Color code the data points by a property (for Poker Hands,
    // it is a CLASS property).
    .attr("fill", function (d) {
      return color(d[COLOR_ATTRIBUTE]);
    })
    .on("mouseover", function (d) {
      div.transition()
        .duration(200)
        .style("opacity", .9);
      div.html(formatTooltip(d))
        .style("left", (d3.event.pageX) + "px")
        .style("top", (d3.event.pageY - (15 * props.length)) + "px")
        .style("width", (6 * tooltipWidth) + "px")
        .style("height", (14 * props.length) + "px");
      highlightOnHover(d[COLOR_ATTRIBUTE]);
    })
    .on("mouseout", function (d) {
      div.transition()
        .duration(500)
        .style("opacity", 0);
      node.attr("opacity", 1);
    })
    .on("click", function (d) {
      if (clickedIndex !== d.index) {
        if (springForce) {
          highlightNeighbours(Array.from(simulation.force(forceName).nodeNeighbours(d.index).keys()));
          clickedIndex = d.index;
        }
      } else {
        node.attr("r", NODE_SIZE).attr("stroke-width", 0);
        clickedIndex = -1;
      }
    });


  // Pass the nodes to the D3 force simulation.
  simulation
    .nodes(nodes)
    .on("tick", ticked)
    .on("end", ended);
};

function ticked() {
  // If rendering is selected, then draw at every iteration.
  if (rendering === true) {
    node // Each sub-circle in the SVG, update cx and cy
      .attr("cx", function (d) {
        return d.x;
      })
      .attr("cy", function (d) {
        return d.y;
      });
  }
  // Emit the distribution data to allow the drawing of the bar graph
  if (springForce) {
    intercom.emit("passedData", simulation.force(forceName).distributionData());
  }
}

function ended() {
  if (rendering !== true) { // Never drawn anything before? Now it's time.
    node
      .attr("cx", function (d) {
        return d.x;
      })
      .attr("cy", function (d) {
        return d.y;
      });
  }

  if (p1 !== 0) {
    // Performance time measurement
    p2 = performance.now();
    console.log("Execution time: " + (p2 - p1));
    // Do not calculate stress for data sets bigger than 100 000.
    // if (nodes.length <= 100000) {
    //   console.log("Stress: ", simulation.force(forceName).stress());
    // }
    // console.log(simulation.force(forceName).nodeNeighbours());
    p1 = 0;
    p2 = 0;
  }
}

function brushEnded() {
  var s = d3.event.selection,
    results = [];

  if (s) {

    var x0 = s[0][0] - width / 2,
      y0 = s[0][1] - height / 2,
      x1 = s[1][0] - width / 2,
      y1 = s[1][1] - height / 2;

    if (nodes) {
      var sel = node.filter(function (d) {
        if (d.x > x0 && d.x < x1 && d.y > y0 && d.y < y1) {
          return true;
        }
        return false;
      }).data();

      results = sel.map(function (a) { return a.index; });
    }

    intercom.emit("select", { name: fileName, indices: results });

    d3.select(".brush").call(brush.move, null);
  }
}


/**
 * Format the tooltip for the data
 * @param {*} node
 */
function formatTooltip(node) {
  var textString = "",
    temp = "";

  tooltipWidth = 0;
  props.forEach(function (element) {
    temp = element + ": " + node[element] + "<br/>";
    textString += temp;
    if (temp.length > tooltipWidth) {
      tooltipWidth = temp.length;
    }
  });
  return textString;
}


/**
 * Initialize the Chalmers' 1996 algorithm and start simulation.
 */
function startNeighbourSamplingSimulation() {
  springForce = true;
  simulation.stop();
  p1 = performance.now();

  simulation
    .alphaDecay(1 - Math.pow(0.001, 1 / ITERATIONS))
    .force(forceName, d3.forceNeighbourSamplingDistance()
      // Set the parameters for the algorithm (optional).
      .neighbourSize(NEIGHBOUR_SIZE)
      .sampleSize(SAMPLE_SIZE)
      // .freeness(0.5)
      .distanceRange(SELECTED_DISTANCE * MULTIPLIER)
      // The distance function that will be used to calculate distances
      //  between nodes.
      .distance(function (s, t) {
        return distanceFunction(s, t, props, norm) * MULTIPLIER;
      })
      .stableVelocity(1.2 * MULTIPLIER)
      .stableVeloHandler( function(){simulation.stop(); ended();} )
      );
  // Restart the simulation.
  console.log(simulation.force(forceName).neighbourSize(), simulation.force(forceName).sampleSize());
  simulation.alpha(1).restart();
}


/**
 * Initialize the hybrid layout algorithm and start simulation.
 */
function startHybridSimulation() {
  springForce = false;
  d3.selectAll(".nodes").remove();
  simulation.stop();
  p1 = performance.now();

  configuration = {
    iteration: ITERATIONS,
    neighbourSize: NEIGHBOUR_SIZE,
    sampleSize: SAMPLE_SIZE,
    distanceRange: SELECTED_DISTANCE * MULTIPLIER,
    fullIterations: FULL_ITERATIONS,
    fullNeighbourSize: FULL_NEIGHBOUR_SIZE,
    fullSampleSize: FULL_SAMPLE_SIZE,
    fullDistanceRange: FULL_SELECTED_DISTANCE * MULTIPLIER,
    distanceFn: function (s, t) {return distanceFunction(s, t, props, norm) * MULTIPLIER;},
    pivots: PIVOTS,
    numPivots: NUM_PIVOTS
  };
  console.log(configuration);
  hybridSimulation = d3.hybridSimulation(nodes, configuration);

  let sample = hybridSimulation.sample();
  let remainder = hybridSimulation.remainder();

  // Add the nodes to DOM.
  node = svg.append("g")
    .attr("class", "nodes")
    .selectAll("circle")
    .data(sample)
    .enter().append("circle")
    .attr("r", NODE_SIZE)
    .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")")
    // Color code the data points by a property (for Poker Hands,
    // it is a CLASS property).
    .attr("fill", function (d) {
      return color(d[COLOR_ATTRIBUTE])
    })
    .on("mouseover", function (d) {
      div.transition()
        .duration(200)
        .style("opacity", .9);
      div.html(formatTooltip(d))
        .style("left", (d3.event.pageX) + "px")
        .style("top", (d3.event.pageY - (15 * props.length)) + "px")
        .style("width", (6 * tooltipWidth) + "px")
        .style("height", (14 * props.length) + "px");
      highlightOnHover(d[COLOR_ATTRIBUTE]);
    })
    .on("mouseout", function (d) {
      div.transition()
        .duration(500)
        .style("opacity", 0);
      node.attr("opacity", 1);
    });

  if (selectedData) {
    unSelectNodes(selectedData);
  }


  hybridSimulation
    .on("sampleTick", ticked)
    .on("fullTick", ticked)
    .on("startFull", startedFull)
    .on("end", endedHybrid);

  function startedFull() {
    d3.selectAll(".nodes").remove();
    // Add the nodes to DOM.
    node = svg.append("g")
      .attr("class", "nodes")
      .selectAll("circle")
      .data(nodes)
      .enter().append("circle")
      .attr("r", NODE_SIZE)
      .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")")
      // Color code the data points by a property (for Poker Hands,
      // it is a CLASS property).
      .attr("fill", function (d) {
        return color(d[COLOR_ATTRIBUTE])
      })
      .on("mouseover", function (d) {
        div.transition()
          .duration(200)
          .style("opacity", .9);
        div.html(formatTooltip(d))
          .style("left", (d3.event.pageX) + "px")
          .style("top", (d3.event.pageY - (15 * props.length)) + "px")
          .style("width", (6 * tooltipWidth) + "px")
          .style("height", (14 * props.length) + "px");
        highlightOnHover(d[COLOR_ATTRIBUTE]);
      })
      .on("mouseout", function (d) {
        div.transition()
          .duration(500)
          .style("opacity", 0);
        node.attr("opacity", 1);
      });

    if (selectedData) {
      unSelectNodes(selectedData);
    }

  }


  function endedHybrid() {
    if (rendering !== true) {
      node
        .attr("cx", function (d) {
          return d.x;
        })
        .attr("cy", function (d) {
          return d.y;
        });
    }

    // Performance time measurement
    p2 = performance.now();
    console.log("Execution time: " + (p2 - p1));
    // Do not calculate stress for data sets bigger than 100 000.
    // if (nodes.length <= 100000) {
    //   console.log("Stress: ", hybridSimulation.stress());
    // }
    p1 = 0;
    p2 = 0;
  }
}


/**
 * Initialize the t-SNE algorithm and start simulation.
 */
function starttSNE() {
  springForce = false;
  simulation.stop();
  p1 = performance.now();

  simulation
    .alphaDecay(1 - Math.pow(0.001, 1 / ITERATIONS))
    .force(forceName, d3.tSNE()
      // Set the parameter for the algorithm (optional).
      .perplexity(PERPLEXITY)
      .learningRate(LEARNING_RATE)
      // The distance function that will be used to calculate distances
      //  between nodes.
      .distance(function (s, t) {
        return distanceFunction(s, t, props, norm) * MULTIPLIER;
      }));
  // Restart the simulation.
  console.log(simulation.force(forceName).perplexity(), simulation.force(forceName).learningRate());
  simulation.alpha(1).restart();
}

/**
 * Initialize the Barnes-Hut algorithm and start simulation.
 */
function startBarnesHutSimulation() {
  springForce = false;
  simulation.stop();
  p1 = performance.now();

  simulation
    .alphaDecay(1 - Math.pow(0.001, 1 / ITERATIONS))
    .force(forceName, d3.forceBarnesHut()
      // The distance function that will be used to calculate distances
      //  between nodes.
      .distance(function (s, t) {
        return distanceFunction(s, t, props, norm) * MULTIPLIER;
      }));
  // Restart the simulation.
  simulation.alpha(1).restart();
}

/**
 * Initialize the link force algorithm and start simulation.
 */
function startLinkSimulation() {
  springForce = false;
  simulation.stop();
  p1 = performance.now();
  let links = [];

  // Initialize link array.
  nodes = simulation.nodes();
  for (i = 0; i < nodes.length; i++) {
    for (j = 0; j < nodes.length; j++) {
      if (i !== j) {
        links.push({
          source: nodes[i],
          target: nodes[j],
        });
      }
    }
  }

  // Add the links to the simulation.
  simulation.force(forceName, d3.forceLink().links(links));

  simulation
    .alphaDecay(1 - Math.pow(0.001, 1 / ITERATIONS))
    .force(forceName)
    // The distance function that will be used to calculate distances
    //  between nodes.
    .distance(function (n) {
      return distanceFunction(n.source, n.target, props, norm) * MULTIPLIER;
    })
    // Set the parameter for the algorithm (optional).
    .strength(1);
  // Restart the simulation.
  simulation.alpha(1).restart();
}

/**
 * Halt the execution.
 */
function stopSimulation() {
  simulation.stop();
  if (typeof hybridSimulation !== 'undefined') {
    hybridSimulation.stop();
  }
}

/**
 * Calculate the average values of the array.
 * @param  {array} array
 * @return {number}  the mean of the array.
 */
function getAverage(array) {
  var total = 0;
  for (var i = 0; i < array.length; i++) {
    total += array[i];
  }
  return total / array.length;
}

/**
 * Deselect the nodes to match the selection from other window.
 * @param {*} data
 */
function unSelectNodes(data) {

  selectedData = data;

  if (fileName === data.name && nodes) {
    node
      .classed("notSelected", function (d) {
        if (data.indices.indexOf(d.index) < 0) {
          return true;
        }
        return false;
      });
  }
}


/**
 * Highlight the neighbours for neighbour and sampling algorithm
 * @param {*} indices
 */
function highlightNeighbours(indices) {
  node
    .attr("r", function (d) {
      if (indices.indexOf(d.index) >= 0) {
        return NODE_SIZE * 2;
      }
      return NODE_SIZE;
    })
    .attr("stroke-width", function (d) {
      if (indices.indexOf(d.index) >= 0) {
        return NODE_SIZE * 0.2 + "px";
      }
      return "0px";
    })
    .attr("stroke", "white");
}


/**
 * Highlight all the nodes with the same class on hover
 * @param {*} highlighValue
 */
function highlightOnHover(highlighValue) {
  node.attr("opacity", function (d) {
    return (highlighValue === d[COLOR_ATTRIBUTE]) ? 1 : 0.3;
  });
}

/**
 * Color the nodes according to given attribute.
 */
function colorToAttribute() {
  node.attr("fill", function (d) {
    return color(d[COLOR_ATTRIBUTE])
  });
}


/**
 * Update the distance range.
 */
function updateDistanceRange() {
  if (springForce) {
    simulation.force(forceName).distanceRange(SELECTED_DISTANCE);
  }
}


/**
 * Implemented pause/resume functionality
 */
function pauseUnPause() {
  if (simulation) {
    if (paused) {
      simulation.force(forceName).distanceRange(SELECTED_DISTANCE);
      simulation.restart();
      d3.select("#pauseButton").text("Pause");
      paused = false;
    } else {
      simulation.stop();
      d3.select("#pauseButton").text("Resume");
      paused = true;
    }
  }
}


/**
 * Average distances for each node.
 * @param {*} dataNodes
 * @param {*} properties
 * @param {*} normalization
 */
function calculateAverageDistance(dataNodes, properties, normalization) {
  var sum = 0,
    n = nodes.length;

  for (var i = 0; i < n; i++) {
    var sumNode = 0;
    for (var j = 0; j < n; j++) {
      if (i !== j) {
        sumNode += distanceFunction(nodes[i], nodes[j], properties, normalization);
        // console.log(sumNode);
      }
    }
    sum += sumNode / (n - 1);
  }

  return sum / n;
}