function _templateObject2() {
  var data = _taggedTemplateLiteral(["\n  margin: 2.5px 0 5px 0;\n"]);

  _templateObject2 = function _templateObject2() {
    return data;
  };

  return data;
}

function _templateObject() {
  var data = _taggedTemplateLiteral(["\n  font-family: Helvetica, Arial, sans-serif;\n  font-size: 16px;\n  position: absolute;\n  padding: 0 10px 0 5px;\n  background: rgba(0, 0, 0, 0.75);\n  color: #fff;\n  max-width: 275px;\n  z-index: 9;\n  pointer-events: none;\n"]);

  _templateObject = function _templateObject() {
    return data;
  };

  return data;
}

function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }

import { string, number, arrayOf, oneOfType, shape } from "prop-types";
import { jsx, css } from "@emotion/core";
import { format } from "d3";
import { get } from "lodash";
import shortid from "shortid";
import window from "global/window";
import { civicFormat } from "..";
var tooltip = css(_templateObject());
var tooltipText = css(_templateObject2());

var MapTooltip = function MapTooltip(props) {
  var tooltipData = props.tooltipData;
  var x = tooltipData.x;
  var y = tooltipData.y;
  var xPositionOffset = 25;
  var xPosition = x < get(window, "innerWidth", 1000) * 0.66 ? x + xPositionOffset : x - xPositionOffset * 3;
  var yPositionOffset = 50;
  var yPostition = y < 375 ? y + yPositionOffset : y - yPositionOffset * 2.75;
  var percentageFormat = format(".1%");

  var sandboxPercentFormat = function sandboxPercentFormat(p) {
    return p < 1 && p > 0 ? percentageFormat(p) : "".concat(p.toFixed(1), "%");
  };

  var sandboxDecimalFormat = format(".2n");

  var sandboxMoneyFormat = function sandboxMoneyFormat(d) {
    return "$".concat(civicFormat.numericShort(d));
  };

  var tooltipContent = tooltipData.content.map(function (t) {
    var formatType = t.format;
    var formattedValue = t.value && formatType === "percentage" ? sandboxPercentFormat(t.value) : t.value && formatType === "dollars" ? sandboxMoneyFormat(t.value) : t.value && formatType === "decimal" ? sandboxDecimalFormat(t.value) : t.value && formatType && civicFormat[formatType] ? civicFormat[formatType](t.value) : t.value ? t.value : "No Data Available";
    return jsx("div", {
      css: tooltipText,
      key: shortid.generate()
    }, "".concat(t.label || t.name, ": ").concat(formattedValue));
  });
  return jsx("div", {
    css: tooltip,
    style: {
      left: xPosition,
      top: yPostition
    }
  }, tooltipContent);
};

MapTooltip.propTypes = {
  tooltipData: shape({
    x: number,
    y: number,
    content: arrayOf(shape({
      label: string,
      value: oneOfType([number, string])
    }))
  })
};
export default MapTooltip;