/* 
TODO 修改完成
*/
import React from "react";
import { map } from "../mapContext";
import * as L from 'leaflet'
import IconFont from '../../../themeComponents/IconFont';


const drawOptions = {
  fill: true,
  fillColor: "#FF5F57",
  fillOpacity: 0.1,
  color: "#FF4343",
  weight: 1
};

@map
class DrawTools extends React.Component {
  constructor(props) {
    super(props);
    this.drawPaths = [];
    this.tempDrawPath = null;
    this.latlngs = [];
  }
  componentDidMount() {
    this.props.init && this.props.init(this);
  }
  componentWillUnmount() {
    this.clearDraw(true);
    this.removeEvent();
    this.drawPaths = null;
    this.latlngs = null;
  }
  /**
   * 开启绘制矩形
   */
  openDrawRect = () => {
    const { map ,mapMethods} = this.props;
    this.removeEvent();
    mapMethods.setSelectCursor()
    map.on("mousedown", this.startDrawRect);
    map.on("mouseup", this.stopDrawRect);
    this.props.drawStart && this.props.drawStart()
  };
  /**
   * 开始绘制矩形
   */
  startDrawRect = e => {
    const { map } = this.props;
    map.dragging.disable();
    this.latlngs[0] = [e.latlng.lat, e.latlng.lng];
    map.on("mousemove", this.drawRectTemp);
  };
  /**
   * 鼠标拖动绘制一个临时的矩形
   */
  drawRectTemp = e => {
    const { map } = this.props;
    this.latlngs[1] = [e.latlng.lat, e.latlng.lng];
    if (this.tempDrawPath) {
      let path = [this.latlngs[0], [this.latlngs[0][0], this.latlngs[1][1]], this.latlngs[1], [this.latlngs[1][0], this.latlngs[0][1]]];
      this.tempDrawPath.setLatLngs(path);
    } else {
      this.tempDrawPath = L.rectangle(this.latlngs, drawOptions).addTo(map);
    }
  };
  /**
   * 结束绘制矩形
   */
  stopDrawRect = e => {
    const { map } = this.props;
    if (!this.tempDrawPath) {
      return;
    }
    this.tempDrawPath.remove();
    map.off("mousemove", this.drawRectTemp);
    map.off("mousedown", this.startDrawRect);
    map.off("mouseup", this.stopDrawRect);
    this.latlngs[1] = [e.latlng.lat, e.latlng.lng];
    const rectangle = L.rectangle(this.latlngs, drawOptions);
    rectangle.addTo(map);
    this.drawPaths.push(rectangle);
    // map.fitBounds(this.latlngs);
    this.props.drawEnd && this.props.drawEnd(rectangle.getLatLngs()[0].map(v => [v.lat,v.lng]), false)
    map.dragging.enable();
    this.latlngs = [];
    this.tempDrawPath = null;
  };
  openDrawCircle = () => {
    const { map } = this.props;
    this.removeEvent();
    map.on("mousedown", this.startDrawCircle);
    map.on("mouseup", this.stopDrawCircle);
    this.props.drawStart && this.props.drawStart()
  };
  startDrawCircle = e => {
    const { map } = this.props;
    map.dragging.disable();
    this.latlngs[0] = [e.latlng.lat, e.latlng.lng];
    map.on("mousemove", this.drawCirleTemp);
  };
  drawCirleTemp = e => {
    const { map } = this.props;
    this.latlngs[1] = [e.latlng.lat, e.latlng.lng];
    const radius = map.distance(...this.latlngs);
    if (this.tempDrawPath) {
      this.tempDrawPath.setRadius(radius);
    } else {
      this.tempDrawPath = L.circle(this.latlngs[0], { radius, ...drawOptions }).addTo(map);
    }
  };
  stopDrawCircle = e => {
    const { map, mapMethods } = this.props;
    if (!this.tempDrawPath) {
      return;
    }
    this.tempDrawPath.remove();
    map.off("mousemove", this.drawCirleTemp);
    map.off("mousedown", this.startDrawCircle);
    map.off("mouseup", this.stopDrawCircle);
    const radius = map.distance(...this.latlngs);
    const circle = L.circle(this.latlngs[0], { radius, ...drawOptions });
    circle.addTo(map);
    this.drawPaths.push(circle);
    this.props.drawEnd && this.props.drawEnd({
      center: this.latlngs[0], 
      radius: Math.sqrt(Math.pow(this.latlngs[0][0] - this.latlngs[1][0], 2) + Math.pow(this.latlngs[0][1] - this.latlngs[1][1], 2))
    }, true)
    mapMethods.setCenter(this.latlngs[0]);
    map.dragging.enable();

    this.latlngs = [];
    this.tempDrawPath = null;
  };
  openDrawPolygon = () => {
    const { map } = this.props;
    this.removeEvent();
    map.on("mousedown", this.startDrawPolygon);
    map.on("dblclick", this.stopDrawPolygon);
    this.props.drawStart && this.props.drawStart()
  };
  startDrawPolygon = e => {
    const { map } = this.props;
    map.dragging.disable();
    this.latlngs.push([e.latlng.lat, e.latlng.lng]);
    if (!this.tempDrawPath) {
      this.tempDrawPath = L.polygon(this.latlngs, drawOptions).addTo(map);
    }
    this.tempDrawPath.setLatLngs(this.latlngs);
    if (this.latlngs.length === 1) {
      map.on("mousemove", this.drawPolygonTemp);
    }
  };
  drawPolygonTemp = e => {
    let index = this.latlngs.length === 1 ? 1 : this.latlngs.length - 1;
    if (this.latlngs[index] && this.latlngs[index][0] === e.latlng.lat && this.latlngs[index][1] === e.latlng.lng) {
      return;
    }
    this.latlngs[index] = [e.latlng.lat, e.latlng.lng];
    this.tempDrawPath.setLatLngs(this.latlngs);
  };
  stopDrawPolygon = e => {
    const { map } = this.props;
    if (!this.tempDrawPath) {
      return;
    }
    this.tempDrawPath.remove();
    map.off("mousemove", this.drawPolygonTemp);
    map.off("mousedown", this.startDrawPolygon);
    map.off("dblclick", this.stopDrawPolygon);
    this.latlngs[this.latlngs.length === 1 ? 1 : this.latlngs.length - 1] = [e.latlng.lat, e.latlng.lng];
    const polygon = L.polygon(this.latlngs, drawOptions).addTo(map);
    this.drawPaths.push(polygon);
    
    // map.fitBounds(polygon.getBounds());
    this.props.drawEnd && this.props.drawEnd(this.latlngs, false)
    map.dragging.enable();
    this.tempDrawPath = null;
    this.latlngs = [];
  };
  clearDraw = (flag) => {
    if (this.tempDrawPath) {
      this.tempDrawPath.remove();
    }
    this.drawPaths && this.drawPaths.forEach(v => v.remove());
    this.drawPaths = [];
    this.tempDrawPath = null;
    this.props.clearDraw && this.props.clearDraw(flag)
  };
  removeEvent() {
    const { map } = this.props;
    map.off("mousemove", this.drawPolygonTemp);
    map.off("mousedown", this.startDrawPolygon);
    map.off("dblclick", this.stopDrawPolygon);

    map.off("mousemove", this.drawCirleTemp);
    map.off("mousedown", this.startDrawCircle);
    map.off("mouseup", this.stopDrawCircle);

    map.off("mousemove", this.drawRectTemp);
    map.off("mousedown", this.startDrawRect);
    map.off("mouseup", this.stopDrawRect);
  }
  render() {
    const {noRender, drawChildren=null} = this.props
    if(noRender){
      return null
    }
    return (
      <div className="map-select-draw-tools">
        <div className="tools-layout">
          <div className="tools-draw" onClick={this.openDrawRect}>
            <IconFont type="icon-S_View_ChooseRectangle" theme="outlined" />
            框选
          </div>
          <div className="tools-draw" onClick={this.openDrawCircle}>
            <IconFont type="icon-S_View_ChooseOval" theme="outlined" />
            圆选
          </div>

          <div className="tools-draw" onClick={this.openDrawPolygon}>
            <IconFont type="icon-S_View_ChoosePolygon" theme="outlined" />
            多边形
          </div>
          <div className="tools-draw" onClick={() => this.clearDraw(false)}>
            <IconFont type="icon-S_Edit_LineClose" theme="outlined" />
            清除
          </div>
          {drawChildren}
        </div>
      </div>
    );
  }
}
export default DrawTools;
