import HPaaSL7 from "../../../../hpaas-core/HPaaSL7";
import { ILayer, LineLayer, PointLayer, PolygonLayer, Popup } from "@antv/l7";
import { BBox, featureCollection, FeatureCollection, Polygon } from "@turf/turf";
import CORRender, { eventType } from "./IRender";
import PolygonRender from "./IRender";
import RoadSelector from "./RoadSelector";

class RenderL7 implements PolygonRender {
  private lineLayer?: ILayer;
  private borderLayer?: ILayer;
  private pointsLayer?: ILayer;
  private hpaas: HPaaSL7;
  private _popup?: Popup;
  public inited = false;
  private tool: RoadSelector;
  constructor(tool: RoadSelector) {
    this.hpaas = tool.hpaas as HPaaSL7;
    this.tool = tool;
  }
  initLayer() {
    this.inited = true;
    this.lineLayer = new LineLayer({
      zIndex: 1000,
    })
      .source(featureCollection([]))
      .color("#3B9EF7")
      .size(2)
      .style({
        opacity: 1,
      });
    this.hpaas.l7Scene.addLayer(this.lineLayer);
    this.borderLayer = new PolygonLayer({
      zIndex: 900,
    })
      .source(featureCollection([]))
      .shape("line")
      .color(this.hpaas.options.mode == "grey" ? "#333" : "#fff")
      .size(3)
      .style({
        lineType: "dash",
        dashArray: [2, 2],
        opacity: 0.6,
      });
    this.hpaas.l7Scene.addLayer(this.borderLayer);

    this._popup = new Popup({
      // offsets: [iconSize / 2, 0],
      closeButton: false,
      stopPropagation: false,
      anchor: "bottom",
    }).setLnglat({ lng: 0, lat: 0 });
  }
  render(featureCollection: FeatureCollection) {
    this.lineLayer?.setData(featureCollection);
    this.borderLayer?.setData(featureCollection);
  }

  bindEvent(events: eventType) {
    this.hpaas.l7Scene.on("mousemove", (e) => {
      let lng = e.lnglat ? e.lnglat.lng : e.lngLat.lng;
      let lat = e.lnglat ? e.lnglat.lat : e.lngLat.lat;
      if (this.tool.toolsCenter.options.pinBaseUnit && this.hpaas.baseUnit?.segmentsIsShow) {
        const newP = this.hpaas.baseUnit?.getNearestPoint([lng, lat]);
        if (newP) {
          lng = newP.geometry.coordinates[0];
          lat = newP.geometry.coordinates[1];
        }
      }
      events.mousemove({
        lnglat: {
          lng,
          lat,
        },
        feature: e.feature,
      });
    });
    this.hpaas.l7Scene.on("click", (e) => {
      let lng = e.lnglat ? e.lnglat.lng : e.lngLat.lng;
      let lat = e.lnglat ? e.lnglat.lat : e.lngLat.lat;
      if (this.tool.toolsCenter.options.pinBaseUnit && this.hpaas.baseUnit?.segmentsIsShow) {
        const newP = this.hpaas.baseUnit?.getNearestPoint([lng, lat]);
        if (newP) {
          lng = newP.geometry.coordinates[0];
          lat = newP.geometry.coordinates[1];
        }
      }
      events.click({
        lnglat: {
          lng,
          lat,
        },
        feature: e.feature,
      });
    });
  }

  popup = {
    html: (html: string) => {
      this._popup?.setHTML(html);
    },
    pos: (pos: { lng: number; lat: number }) => {
      this._popup?.setLnglat([pos.lng, pos.lat]);
    },
    show: (html?: string, pos?: { lng: number; lat: number }) => {
      if (this.hpaas.sceneLoaded) {
        this._popup && this.hpaas.l7Scene.addPopup(this._popup);
        html && this._popup?.setHTML(html);
        pos && this._popup?.setLnglat([pos.lng, pos.lat]);
        this._popup?.open();
      }
    },
    hide: () => {
      this._popup?.close();
    },
  };
  fitBounds(b: BBox) {
    this.hpaas.l7Scene.fitBounds([
      [b[0], b[1]],
      [b[2], b[3]],
    ]);
  }
  reset() {
    this._popup?.close();
    this.render(featureCollection([]));
  }
}

export default RenderL7;