import React from 'react';
import { map } from '../mapContext';
import * as L from 'leaflet';
import { drawOptions } from '../utils/config';
import { createCenterDeviceIcon, createDistanceIcon } from '../utils/overlayer';
import MapResetTools from './MapResetTools';
import { isEqual } from '@zenview/micro-utils';
import _ from 'lodash';
import { LMConfig } from '@zenview/micro-basic-library';
@map
class MakerNearSpace extends React.Component {
  constructor(props) {
    super(props);
    this.featureGroup = L.featureGroup().addTo(this.props.map);
    this.state = {
      point: _.cloneDeep(props.point) || null,
      isPointChange: false,
    };
  }
  static getDerivedStateFromProps(props, state) {
    if (props.point && !isEqual(state.point, props.point)) {
      return { point: _.cloneDeep(props.point), isPointChange: true };
    }
    return null;
  }
  componentDidMount() {
    if (this.state.point) {
      this.createInitLayer();
    }
  }
  componentDidUpdate() {
    if (this.state.isPointChange) {
      this.setState({ isPointChange: false });
      this.createInitLayer();
    }
  }
  componentWillUnmount() {
    clearTimeout(this.timer);
    this.circleMaker&&this.circleMaker.remove()
    this.featureGroup&&this.featureGroup.clearLayers();
    this.featureGroup = null;
  }

  createInitLayer() {
    const { point } = this.state;
    if (!point.latitude || !point.longitude) {
      this.featureGroup.clearLayers();
      return;
    }
    this.createCenterMarker();
    if (this.props.isNearSpace !== false) {
      this.createCircleSpace();
      this.createLableMarker();
    }
    this.timer = setTimeout(this.mapReset, 200);
  }
  createCenterMarker() {
    const { options, createCallback, showPopup } = this.props;
    const { point } = this.state;
    const latlng = L.latLng({ lat: point.latitude, lng: point.longitude });
    let marker = this.featureGroup.getLayers().find((v) => v.__extData.isCenterMaker);
    if (marker) {
      marker.setLatLng(latlng);
      if (showPopup) {
        marker.openPopup();
      }
      return;
    }
    marker = L.marker(latlng, { icon: createCenterDeviceIcon(point), ...options });
    marker.__extData = { isCenterMaker: true };
    this.featureGroup.addLayer(marker);
    createCallback && createCallback(marker);
  }
  createCircleSpace() {
    const { radius = 500 } = this.props;
    const { point } = this.state;
    const latlng = L.latLng({ lat: point.latitude, lng: point.longitude });
    if (this.circleMaker) {
      return this.circleMaker.setLatLng(latlng);
    }
    this.circleMaker = L.circle(latlng, {
      radius,
      ...drawOptions,
    }).addTo(this.props.map);
  }
  createLableMarker() {
    const { radius = 500 } = this.props;
    const { point } = this.state;
    const maxlatlng = L.latLng({ lat: point.latitude, lng: point.longitude }).toBounds(1000);
    const latlng = L.latLng({ lat: maxlatlng.getNorthEast().lat, lng: point.longitude });
    let marker = this.featureGroup.getLayers().find((v) => v.__extData.isLabelMaker);
    if (marker) {
      return marker.setLatLng(latlng);
    }
    marker = L.marker(latlng, { icon: createDistanceIcon(radius) });
    marker.__extData = { isLabelMaker: true };
    this.featureGroup.addLayer(marker);
  }
  mapReset = () => {
    const { point } = this.state;
    if (!point.latitude || !point.longitude) {
      const latlng = L.latLng({ lat: LMConfig.LMapConfig.layerOptions.center[1], lng: LMConfig.LMapConfig.layerOptions.center[0] });
      this.props.map.setView(latlng, LMConfig.LMapConfig.layerOptions.maxZoom - 2);
      return 
    }
    const latlng = L.latLng({ lat: point.latitude, lng: point.longitude });
    this.props.map.setView(latlng, LMConfig.LMapConfig.layerOptions.maxZoom - 2);
  };
  render() {
    return <MapResetTools mapReset={this.mapReset} />;
  }
}

export default MakerNearSpace;
