import PropTypes from 'prop-types';
import React from 'react';
import MapGL from 'react-map-gl';

// Note: this is pretty much identical to react-map-gl/utils/automount. Because
// we are subclassing InteractiveMap (and how property inheritance works),
// we need to pass the parent in for autobinding along with the current instance.
const PREDEFINED = [
  'constructor', 'render', 'componentWillMount', 'componentDidMount',
  'componentWillReceiveProps', 'shouldComponentUpdate', 'componentWillUpdate',
  'componentDidUpdate', 'componentWillUnmount'
];

const autobind = (obj, parent) => {
  const propNames = Object.getOwnPropertyNames(parent.prototype);
  for (const key of propNames) {
    if (typeof obj[key] === 'function') {
      if (!PREDEFINED.find(name => key === name)) {
        obj[key] = obj[key].bind(obj);
      }
    }
  }
}

// Adding layers requires a reference to the mapbox object itself. This is
// different than just putting new HTML elements over the map, because a layer
// is part of the map. Instead of making a massive map component, we're able to
// add <Layer>s as subcomponents that (mostly) work the way react and HTML
// elements would expect them to. The layers get the mapbox object via. the
// `loaded` context, which is a promise that is resolved with the map once it
// has finally loaded.
class Map extends MapGL {
  static childContextTypes = {
    ...MapGL.childContextTypes,
    loaded: PropTypes.objectOf(Promise),
  }

  constructor(props) {
    super(props);
    autobind(this, MapGL);

    this._loaded = new Promise((resolve) => this._loadedResolve = resolve);
  }

  _staticMapLoaded = (ref) => {
    super._staticMapLoaded(ref);
    this.getMap().on('load', () => this._loadedResolve(this.getMap()));
  }

  getChildContext() {
    return {
      ...super.getChildContext(),
      loaded: this._loaded,
    };
  }
}

export default Map;