import React from 'react';
import { Provider } from '../mapContext';
import { LMConfig } from '@zenview/micro-basic-library';
export default class CreatMap extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      map: null,
    };
  }
  componentDidMount() {
    this.createMap();
  }

  createMap = () => {
    const { MapPlatForm, THREE } = window;
    const CustomConfig = LMConfig.CustomConfig?.ZenMap || null;
    // let url=CustomConfig?.vectorLayer[0].layerOpt.url[0].split("mapbox")[0];
    const { mapBoxId } = this.props;
    if (mapBoxId) {
      this.mapContainer = document.getElementById(mapBoxId);
      var mapConfig = new MapPlatForm.Base.MapConfig();
      var resultJson = mapConfig.createMap(this.mapContainer, CustomConfig);
      this.map = window.zenmap = resultJson.map;
      this.mapConfig = mapConfig;
      this.mapTools = new MapPlatForm.Base.MapTools(resultJson.map);
      // this.mapService = window.zenmap.mapService = new MapPlatForm.Base.MapService(this.map, "/zenmapdataservice");
      this.arrowline = new MapPlatForm.Base.ArrowLine(this.map, true);
      this.loader = new THREE.GLTFLoader();
      this.setState({ map: resultJson.map });
      this.map.load(() => {
        this.props.mapReady(resultJson.map); //监听map创建状态
      });
    }
  };

  componentWillUnmount() {
    const { map } = this.state;
    map && map.destroyMap();
  }

  render() {
    const { mapBoxId, children, height = '100%' } = this.props;
    return (
      <div id={mapBoxId} style={{ width: '100%', height: height, position: 'relative' }}>
        <Provider value={{ map: this.state.map }}>{this.state.map && children}</Provider>
      </div>
    );
  }
}
