'use strict';

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

var _toConsumableArray2 = require('babel-runtime/helpers/toConsumableArray');

var _toConsumableArray3 = _interopRequireDefault(_toConsumableArray2);

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

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

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

var _geo = require('@vx/geo');

var _topojsonClient = require('topojson-client');

var topojson = _interopRequireWildcard(_topojsonClient);

var _worldTopo = require('../../static/vx-geo/world-topo.json');

var _worldTopo2 = _interopRequireDefault(_worldTopo);

function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key]; } } newObj.default = obj; return newObj; } }

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

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

exports.default = function (_ref) {
  var width = _ref.width,
      height = _ref.height,
      _ref$events = _ref.events,
      events = _ref$events === undefined ? false : _ref$events;

  if (width < 10) return _react2.default.createElement('div', {
    __source: {
      fileName: _jsxFileName,
      lineNumber: 9
    }
  });

  var world = topojson.feature(_worldTopo2.default, _worldTopo2.default.objects.units);

  var color = (0, _scale.scaleQuantize)({
    domain: [Math.min.apply(Math, (0, _toConsumableArray3.default)(world.features.map(function (f) {
      return f.geometry.coordinates.length;
    }))), Math.max.apply(Math, (0, _toConsumableArray3.default)(world.features.map(function (f) {
      return f.geometry.coordinates.length;
    })))],
    range: ['#ffb01d', '#ffa020', '#ff9221', '#ff8424', '#ff7425', '#fc5e2f', '#f94b3a', '#f63a48']
  });

  return _react2.default.createElement('svg', { width: width, height: height, __source: {
      fileName: _jsxFileName,
      lineNumber: 35
    }
  }, _react2.default.createElement(_gradient.LinearGradient, {
    id: 'geo_mercator_radial',
    from: '#dc22af',
    to: '#fd7e0f',
    r: '80%',
    __source: {
      fileName: _jsxFileName,
      lineNumber: 36
    }
  }), _react2.default.createElement('rect', {
    x: 0,
    y: 0,
    width: width,
    height: height,
    fill: '#f9f7e8',
    rx: 14,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 42
    }
  }), _react2.default.createElement(_geo.Mercator, {
    data: world.features,
    scale: width / 630 * 100,
    translate: [width / 2, height / 2 + 50],
    fill: function fill(feature) {
      return color(feature.geometry.coordinates.length);
    },
    stroke: function stroke() {
      return '#f9f7e8';
    },
    strokeWidth: 0.5,
    onClick: function onClick(data) {
      return function (event) {
        if (!events) return;
        alert('Clicked: ' + data.properties.name + ' (' + data.id + ')');
      };
    },
    graticule: {
      stroke: 'rgba(33,33,33,0.05)'
    },
    __source: {
      fileName: _jsxFileName,
      lineNumber: 50
    }
  }));
};