'use strict';

Object.defineProperty(exports, "__esModule", {
  value: true
});

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _group = require('@vx/group');

var _glyph = require('@vx/glyph');

var _gradient = require('@vx/gradient');

var _scale = require('@vx/scale');

var _mockData = require('@vx/mock-data');

var _tooltip = require('@vx/tooltip');

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

var _jsxFileName = '/Users/hshoff/code/vx/packages/vx-demo/components/tiles/dots.js';


var points = (0, _mockData.genRandomNormalPoints)(600).filter(function (d, i) {
  return i < 600;
});

var x = function x(d) {
  return d[0];
};
var y = function y(d) {
  return d[1];
};
var z = function z(d) {
  return d[2];
};

var tooltipTimeout = void 0;

exports.default = (0, _tooltip.withTooltip)(function (props) {
  var width = props.width,
      height = props.height;

  var xMax = width;
  var yMax = height - 80;
  if (width < 10) return null;

  var xScale = (0, _scale.scaleLinear)({
    domain: [1.3, 2.2],
    range: [0, xMax],
    clamp: true
  });
  var yScale = (0, _scale.scaleLinear)({
    domain: [0.75, 1.6],
    range: [yMax, 0],
    clamp: true
  });

  return _react2.default.createElement('div', {
    __source: {
      fileName: _jsxFileName,
      lineNumber: 37
    }
  }, _react2.default.createElement('svg', { width: width, height: height, __source: {
      fileName: _jsxFileName,
      lineNumber: 38
    }
  }, _react2.default.createElement(_gradient.GradientPinkRed, { id: 'pink', __source: {
      fileName: _jsxFileName,
      lineNumber: 39
    }
  }), _react2.default.createElement('rect', {
    x: 0,
    y: 0,
    width: width,
    height: height,
    rx: 14,
    fill: 'url(#pink)',
    __source: {
      fileName: _jsxFileName,
      lineNumber: 40
    }
  }), _react2.default.createElement(_group.Group, {
    onTouchStart: function onTouchStart() {
      return function (event) {
        if (tooltipTimeout) clearTimeout(tooltipTimeout);
        props.hideTooltip();
      };
    },
    __source: {
      fileName: _jsxFileName,
      lineNumber: 48
    }
  }, points.map(function (point, i) {
    return _react2.default.createElement(_glyph.GlyphCircle, {
      className: 'dot',
      key: 'point-' + point.x + '-' + i,
      fill: '#f6c431',
      left: xScale(x(point)),
      top: yScale(y(point)),
      size: i % 3 === 0 ? 12 : 24,
      onMouseEnter: function onMouseEnter() {
        return function (event) {
          if (tooltipTimeout) clearTimeout(tooltipTimeout);
          props.showTooltip({
            tooltipLeft: xScale(x(point)),
            tooltipTop: yScale(y(point)) + 20,
            tooltipData: point
          });
        };
      },
      onTouchStart: function onTouchStart() {
        return function (event) {
          if (tooltipTimeout) clearTimeout(tooltipTimeout);
          props.showTooltip({
            tooltipLeft: xScale(x(point)),
            tooltipTop: yScale(y(point)) - 30,
            tooltipData: point
          });
        };
      },
      onMouseLeave: function onMouseLeave() {
        return function (event) {
          tooltipTimeout = setTimeout(function () {
            props.hideTooltip();
          }, 300);
        };
      },
      __source: {
        fileName: _jsxFileName,
        lineNumber: 56
      }
    });
  }))), props.tooltipOpen && _react2.default.createElement(_tooltip.Tooltip, { left: props.tooltipLeft, top: props.tooltipTop, __source: {
      fileName: _jsxFileName,
      lineNumber: 90
    }
  }, _react2.default.createElement('div', {
    __source: {
      fileName: _jsxFileName,
      lineNumber: 91
    }
  }, _react2.default.createElement('strong', {
    __source: {
      fileName: _jsxFileName,
      lineNumber: 92
    }
  }, 'x:'), ' ', props.tooltipData[0]), _react2.default.createElement('div', {
    __source: {
      fileName: _jsxFileName,
      lineNumber: 94
    }
  }, _react2.default.createElement('strong', {
    __source: {
      fileName: _jsxFileName,
      lineNumber: 95
    }
  }, 'y:'), ' ', props.tooltipData[1])));
});