import React from 'react';
import CreatMap from '../../../components/creatMap';
import LineLayer from '../../../components/lineLayer';
import MapResetTools from '../../../components/MapResetTools';
import { validLatLon } from '../../../method/base';

class RoadMap extends React.Component {
  constructor(props) {
    super(props);
    this.roadMap = React.createRef();
    this.state = {
      map: null,
    };
  }

  mapReady = (map) => {
    this.roadMap.current && this.roadMap.current.mapReady(map);
    this.setState({ map });
  };

  setPointCenter = (cid) => {
    this.roadMap.current.setPointCenter(cid);
  };

  mapZoom = (zoom) => {
    const { map } = this.state;
    if (!map) {
      return;
    }
    map.setZoom(map.getZoom() + zoom);
  };

  getTrajectory = () => {
    this.roadMap.current.getTrajectory();
  };

  fitPlaceView = (id) => {
    const { places } = this.props;
    let centerPlace = places.find((v) => +v.placeId === +id);
    this.roadMap.current.setPlaceCenter(centerPlace);
  };

  mapReset = () => {
    const { map } = this.state;
    if (!map) {
      return;
    }
    map.reset();
  };

  render() {
    const { mapBoxId, height, data, graph = [], graphKey = 'cid', graphNameKey = 'name', feqType, onPolygonClick, places, type = 'default', ...props } = this.props;
    let newGraph = graph.filter((v) => {
      v.lon = v.position[0];
      v.lat = v.position[1];
      return validLatLon(v.lat, v.lon);
    }); //过滤不合法的经纬度
    return (
      <CreatMap mapBoxId={mapBoxId} mapReady={this.mapReady} height={height}>
        <LineLayer data={newGraph} dataKey={graphKey} dataNameKey={graphNameKey} ref={this.roadMap} places={places} type={type} {...props} />
        <MapResetTools className="person-map-reset" mapZoom={this.mapZoom} mapReset={this.mapReset} />
      </CreatMap>
    );
  }
}

export default RoadMap;
