import React from 'react';
import { AMapScene } from '@wisdom-map/amap';
import { connect } from 'react-redux';
import { store } from '@wisdom-utils/utils';
import { actionCreators } from '../../../containers/App/store';

const AMap = props => {
  const getMap = (obj, current) => {
    store.set('amapView', {
      Amap: obj,
      map: current,
    });
    props.updageAMapView({
      Amap: obj,
      map: current,
    });
  };

  const mapOptions = {
    config: window.globalConfig.mapsettings,
    theme: 'amap://styles/74fae00a851749793870b658f9f22d55',
    mapOptions: {
      plugins: ['AMap.MarkerClusterer'],
    },
  };

  return (
    <div
      style={{
        position: 'absolute',
        top: 0,
        right: 0,
        bottom: 0,
        left: 0,
      }}
    >
      <AMapScene {...mapOptions} getMapInfo={getMap} />
    </div>
  );
};
const mapStateToProps = state => ({
  global: state.getIn(['global', 'globalConfig']),
  amapView: state.getIn(['global', 'amapView']),
});

const mapDispatchToProps = dispatch => ({
  updageAMapView(amapView) {
    // eslint-disable-next-line no-undef
    dispatch(actionCreators.updageAMapView(amapView));
  },
});

export default connect(
  mapStateToProps,
  mapDispatchToProps,
)(AMap);
