import React from 'react';
import { connect } from 'redux-bundler-react';

class Map extends React.Component {

  componentDidMount(){
    const { doMapInitialize, viewState, limitMapExtent } = this.props;
    const { center, zoom, rotation, minZoom, maxZoom } = viewState;
    
    doMapInitialize(this.mapEl, {
      center: center,
      zoom: zoom,
      rotation: rotation,
      minZoom: minZoom,
      maxZoom: maxZoom,
      layers:[],
      limitMapExtent: limitMapExtent
    });
		// doAddMapDragDropListeners(this.mapEl);
  }

  render(){
    const { componentsLeftSidebarCount, componentsRightSidebarCount, cursorClass } = this.props;
    const style = {
      position: "absolute",
      top: 0,
      left: componentsLeftSidebarCount > 0 ? 49 : 0,
      right: componentsRightSidebarCount > 0 ? 49 : 0,
      bottom: 0
    }
    return (
      <div id="map" className={cursorClass} ref={(el) => { this.mapEl = el }} style={style}/>
    )
  }
}

export default connect(
  'doMapInitialize',
  'selectLimitMapExtent',
  'selectViewState',
  'selectCursorClass',
  'selectComponentsLeftSidebarCount',
  'selectComponentsRightSidebarCount',
  Map
);