'use strict';

function showTooltip(d, i, options, popoverTooltip) {
  // test the bootstrap.native import
  // console.log('bsn', bsn);
  // var Popover = bsn.__moduleExports.Popover;

  var idVariable = options.idVariable;
  var xVariable = options.xVariable;
  var yVariable = options.yVariable;
  var xSelector = options.xSelector;
  var ySelector = options.ySelector;
  var tip = options.tip;
  var wrapper = options.wrapper;
  var height = options.height;
  var width = options.width;
  var tooltipVariables = options.tooltipVariables;
  var xDroplineTextFormat = options.xDroplineTextFormat;
  var yDroplineTextFormat = options.yDroplineTextFormat;
  // Save the circle element (so not the voronoi which is triggering the hover event)
  // in a variable by using the unique class of the voronoi (idVariable)
  var elementSelector = void 0;
  if (typeof d.datum !== 'undefined' && typeof d.datum[idVariable] !== 'undefined') {
    elementSelector = '.marks.' + d.datum[idVariable];
  } else {
    elementSelector = '.marks.' + d[idVariable];
  }
  console.log('elementSelector from showTooltip', elementSelector);

  var element = d3.selectAll(elementSelector);

  var el = element._groups[0];

  function generateHTML() {
    // console.log('d from tooltip html function', d);
    var allRows = '';
    tooltipVariables.forEach(function (e) {
      var currentValue = void 0;
      var f = void 0;
      if (typeof d.datum !== 'undefined') {
        f = d.datum;
      } else {
        f = d;
      }
      // now parse based on the format
      if (typeof e.format !== 'undefined') {
        if (e.type === 'time') {
          // time formatting
          var inputValue = new Date(Number(f[e.name]));
          // TODO: handle case where date values are strings
          var currentFormat = d3.timeFormat(e.format);
          currentValue = currentFormat(inputValue);
        } else {
          // number formatting
          var _inputValue = Number(f[e.name]);
          var _currentFormat = d3.format(e.format);
          currentValue = _currentFormat(_inputValue);
        }
      } else {
        // no formatting
        currentValue = f[e.name];
      }

      var currentText = void 0;
      if (typeof e.valueOnly !== 'undefined') {
        currentText = currentValue;
      } else {
        currentText = e.name + ' ' + currentValue;
      }
      var currentRow = '<span style=\'font-size: 11px; display: block; text-align: center;\'>' + currentText + '</span>';
      allRows = allRows.concat(currentRow);
    });
    var html = '<div class="popover" role="tooltip">\n          <div class="arrow"></div>\n          <div class="popover-content">' + allRows + '</div>\n        </div>';
    // console.log('html from template', html);
    return html;
  };

  // close any lingering tooltips from
  // previous interactions
  d3.selectAll('.popover').remove();

  //Fade out guide lines, then remove them
  d3.selectAll('.guide').transition().duration(200).style('opacity', 0).remove();

  //Define and show the tooltip
  popoverTooltip = new Popover(elementSelector, {
    trigger: 'hover',
    duration: 100,
    delay: 100,
    template: generateHTML()
  });

  // console.log('popoverTooltip', popoverTooltip);
  popoverTooltip.open();

  //Make chosen circle more visible
  element.style("opacity", 1);

  //Place and show tooltip
  var x = +element.attr("cx");
  var y = +element.attr("cy");
  var color = element.style("fill");

  //
  //Append lines to bubbles that will be used to show the precise data points
  //

  //vertical line to x-axis
  wrapper.append("line").attr("class", "guide").attr("x1", x).attr("x2", x).attr("y1", y).attr("y2", height + 20).style("stroke", color).style("opacity", 0).transition().duration(200).style("opacity", 0.5);
  //Value on the axis
  wrapper.append("text").attr("class", "guide").attr("x", x).attr("y", height + 38).style("fill", color).style("opacity", 0).style("text-anchor", "middle").text(d3.format(xDroplineTextFormat)(d[xVariable])).transition().duration(200).style("opacity", 0.5);

  //horizontal line to y-axis
  wrapper.append("line").attr("class", "guide").attr("x1", x).attr("x2", -20).attr("y1", y).attr("y2", y).style("stroke", color).style("opacity", 0).transition().duration(200).style("opacity", 0.5);
  //Value on the axis
  wrapper.append("text").attr("class", "guide").attr("x", -25).attr("y", y).attr("dy", "0.35em").style("fill", color).style("opacity", 0).style("text-anchor", "end").text(d3.format(yDroplineTextFormat)(d[yVariable])).transition().duration(200).style("opacity", 0.5);

  return popoverTooltip;
} // function showTooltip