import { Popup } from "@antv/l7";
import { featureCollection, FeatureCollection, MultiPolygon, point, Polygon, Position } from "@turf/turf";
import CORRender, { eventType } from "./IRender";
import HPaaSDeckGL from "../../../HPaaSDeckGL";
// import { GeoJsonLayer } from "deck.gl";
import { pointStyle, polygonStyle } from "../drawStyle";
// let layerIndex = 1;
class CORRenderDeckGL implements CORRender {
  private bgLayer?: any;
  private pointsLayer?: any;
  private hpaas: HPaaSDeckGL;
  private _popup?: Popup;
  public inited = false;

  constructor(hpaas: HPaaSDeckGL) {
    this.hpaas = hpaas;
  }
  initLayer() {
    this.inited = true;
    this.bgLayer = this.hpaas.scene.createLayer("Polygon", polygonStyle);
    this.hpaas.scene.addLayer(this.bgLayer);
    this.pointsLayer = this.hpaas.scene.createLayer("Point", pointStyle);
    this.hpaas.scene.addLayer(this.pointsLayer);
  }

  render(
    _featureCollection: FeatureCollection<MultiPolygon>,
    pointsList: {
      lng: number;
      lat: number;
    }[]
  ) {
    // this.bgLayer?.updateState({ props: { data: featureCollection }, changeFlags: { dataChanged: true } });
    this.hpaas.scene.setData(this.bgLayer, _featureCollection);
    const features = pointsList.map((d) => {
      return point([d.lng, d.lat]);
    });
    this.hpaas.scene.setData(this.pointsLayer, featureCollection(features));
  }

  bindEvent(events: eventType) {
    this.hpaas.scene.sceneEvent.on("click", (e) => {
      events.click(e);
    });
    this.hpaas.scene.sceneEvent.on("mousemove", (e) => {
      events.mousemove(e);
    });
  }

  popup = {
    show: (html: string, pos: { lng: number; lat: number }) => {
      html && this.hpaas.scene.popup.html(html);
      this.hpaas.scene.popup.show();
    },
    hide: () => {
      this.hpaas.scene.popup.hide();
    },
  };
}

export default CORRenderDeckGL;