import React from 'react';
import CreatMap from '../../../components/creatMap';
import AnimationLineLayer from '../../../components/AnimationLineLayer';
import TrajectoryTools from '../../../components/TrajectoryTools';
import { validLatLon } from '../../../method/base';

class TrajectoryMap extends React.Component {
  constructor(props) {
    super(props);
    this.AnimationLine = React.createRef();
    this.state = {
      isPlay: false,
      animationLineManager: null,
      visible: true, //默认开启图片
      map: null,
      speed: 200,
    };
  }

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

  getAnimationLine = (animationLine) => {
    this.setState({ animationLineManager: animationLine });
  };

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

  playOrPause = () => {
    const { animationLineManager, isPlay, speed } = this.state;
    if (!animationLineManager) {
      return;
    }
    if (isPlay) {
      if (this.props?.currentIndex * 1 === 0) {
        this.reset();
      } else {
        animationLineManager.setSpeed(speed);
        animationLineManager.start();
        animationLineManager.trace();
      }
    } else {
      animationLineManager.pause();
    }
    this.setState({ isPlay: !isPlay });
  };

  reset = () => {
    const { animationLineManager } = this.state;
    if (!animationLineManager) {
      return;
    }
    animationLineManager.restart();
    this.setState({ isPlay: false });
  };

  prev = () => {
    const { animationLineManager, map } = this.state;
    if (!animationLineManager) {
      return;
    }
    const { graph, currentIndex, setCurrentIndex } = this.props;
    if (currentIndex < 1 || !graph.length) {
      currentIndex === 0 && this.props.changeIndexCallback(0);
      return;
    }
    animationLineManager.setPosition(graph[currentIndex - 1].arrIndex, 0);
    map.setCenter(graph[currentIndex - 1], map.getZoom(), { speed: 10 });
    setCurrentIndex(currentIndex - 1);
    this.AnimationLine.current.changeInfoPosition(graph[currentIndex - 1]);
    if (graph[currentIndex - 1].topIndex) {
      this.props.changeIndexCallback(graph[currentIndex - 1].topIndex);
    }
  };

  next = () => {
    const { animationLineManager, map } = this.state;
    const { graph, currentIndex, setCurrentIndex } = this.props;
    if (!animationLineManager) {
      return;
    }
    if (currentIndex > graph.length - 2 || !graph.length) {
      return;
    }
    animationLineManager.setPosition(graph[currentIndex + 1].arrIndex, 0);
    map.setCenter(graph[currentIndex + 1], map.getZoom(), { speed: 10 });
    setCurrentIndex(currentIndex + 1);
    this.AnimationLine.current.changeInfoPosition(graph[currentIndex + 1]);
    if (graph[currentIndex + 1].topIndex) {
      this.props.changeIndexCallback(graph[currentIndex + 1].topIndex);
    }
  };

  change = (index) => {
    //右侧列表点击地图回应
    const { animationLineManager, map } = this.state;
    const { graph } = this.props;
    if (!animationLineManager) {
      return;
    }
    animationLineManager.setPosition(graph[index].arrIndex, 0);
    this.AnimationLine.current.changeInfoPosition(graph[index]);
    map.setCenter(graph[index], map.getZoom(), { speed: 10 });
  };

  onChangeVisible = () => {
    this.setState({ visible: !this.state.visible });
    this.AnimationLine.current.changeImgVisible();
  };

  speedChange = (speed) => {
    const { animationLineManager } = this.state;
    if (!animationLineManager) {
      return;
    }
    this.setState({ speed });
    animationLineManager.pause();
    animationLineManager.setSpeed(speed);
    animationLineManager.start();
  };

  render() {
    const { mapBoxId, graph = [], data, type = 'default', ...props } = this.props;
    const { visible, isPlay, speed } = this.state;
    let newData = graph.filter((v, index) => {
      v.lon = v.longitude;
      v.lat = v.latitude;
      v.topIndex = index;
      return validLatLon(v.lat, v.lon);
    }); //过滤不合法的经纬度

    return (
      <CreatMap mapBoxId={mapBoxId} mapReady={this.mapReady}>
        <AnimationLineLayer data={newData} getAnimationLine={this.getAnimationLine} ref={this.AnimationLine} speed={speed} type={type} {...props} setIsPlay={(state) => this.setState({isPlay:state})}/>
        <TrajectoryTools playOrPause={this.playOrPause} reset={this.reset} prev={this.prev} next={this.next} visible={visible} onChangeVisible={this.onChangeVisible} isPause={isPlay} speedChange={this.speedChange} speed={speed} />
      </CreatMap>
    );
  }
}

export default TrajectoryMap;
