import Mapbox from 'react-map-gl/dist/esm/mapbox/mapbox';
import Deck from '../lib/deck';
const CANVAS_STYLE = {
  position: 'absolute',
  left: 0,
  top: 0,
  width: '100%',
  height: '100%'
};

function createCanvas(props) {
  let {
    container = document.body
  } = props;

  if (typeof container === 'string') {
    container = document.getElementById(container);
  }

  if (!container) {
    throw Error('Deck: container not found');
  }

  const containerStyle = window.getComputedStyle(container);

  if (containerStyle.position === 'static') {
    container.style.position = 'relative';
  }

  const mapCanvas = document.createElement('div');
  container.appendChild(mapCanvas);
  Object.assign(mapCanvas.style, CANVAS_STYLE);
  const deckCanvas = document.createElement('canvas');
  container.appendChild(deckCanvas);
  Object.assign(deckCanvas.style, CANVAS_STYLE);
  return {
    container,
    mapCanvas,
    deckCanvas
  };
}

export default class DeckGL extends Deck {
  constructor(props) {
    if (typeof document === 'undefined') {
      throw Error('Deck can only be used in the browser');
    }

    const {
      mapCanvas,
      deckCanvas
    } = createCanvas(props);
    const viewState = props.viewState || props.initialViewState;
    const isMap = Number.isFinite(viewState && viewState.latitude);
    const {
      map = globalThis.mapboxgl || globalThis.maplibregl
    } = props;
    super({
      canvas: deckCanvas,
      ...props
    });
    this._map = void 0;

    if (map && map.Map) {
      this._map = isMap && new Mapbox({ ...props,
        viewState,
        container: mapCanvas,
        mapboxgl: map
      });
    } else {
      this._map = map;
    }
  }

  getMapboxMap() {
    return this._map && this._map.getMap();
  }

  finalize() {
    if (this._map) {
      this._map.finalize();
    }

    super.finalize();
  }

  setProps(props) {
    if ('mapStyle' in props && this._map) {
      this._map._map.setStyle(props.mapStyle);
    }

    super.setProps(props);
  }

  _drawLayers(redrawReason, options) {
    if (this._map) {
      const viewport = this.getViewports()[0];

      if (viewport) {
        this._map.setProps({
          width: viewport.width,
          height: viewport.height,
          viewState: viewport
        });
      }
    }

    super._drawLayers(redrawReason, options);
  }

}
//# sourceMappingURL=deckgl.js.map