'use strict';

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

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

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

const L = require('leaflet'); /* eslint class-methods-use-this: 0 */

L.Icon.Default.imagePath = '../node_modules/leaflet/dist/images/';

const MIMETYPE = 'application/vnd.geo+json';

class GeoJSONTransform extends _react2.default.Component {

  componentDidMount() {
    const map = L.map(this.el);
    map.scrollWheelZoom.disable();
    // TODO: Determine a strategy for picking tiles
    L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpandmbXliNDBjZWd2M2x6bDk3c2ZtOTkifQ._QA7i5Mpkd_m30IGElHziw', {
      attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>',
      id: `mapbox.${ this.props.theme }`
    }).addTo(map);
    const geoJSON = this.props.data.toJS();
    const geoJSONLayer = L.geoJson(geoJSON).addTo(map);
    map.fitBounds(geoJSONLayer.getBounds());
  }

  shouldComponentUpdate() {
    return false;
  }

  render() {
    return _react2.default.createElement(
      'div',
      null,
      _react2.default.createElement('link', { rel: 'stylesheet', href: '../node_modules/leaflet/dist/leaflet.css' }),
      _react2.default.createElement('div', {
        ref: el => {
          this.el = el;
        },
        style: { height: '600px', width: '100%' }
      })
    );
  }
}

exports.GeoJSONTransform = GeoJSONTransform;
GeoJSONTransform.propTypes = {
  data: _react.PropTypes.object,
  theme: _react.PropTypes.string
};

GeoJSONTransform.defaultProps = {
  theme: 'light'
};

GeoJSONTransform.MIMETYPE = MIMETYPE;

exports.default = GeoJSONTransform;