import HPaaSOL from "../../../../hpaas-core/HPaaSOL";
import CORRender, { eventType } from "./IRender";
import VectorLayer from "ol/layer/Vector";
import Style from "ol/style/Style";
import Fill from "ol/style/Fill";
import Stroke from "ol/style/Stroke";
import VectorSource from "ol/source/Vector";
import GeoJSON from "ol/format/GeoJSON";
import Polygon from "ol/geom/Polygon";
import { FeatureCollection, MultiPolygon } from "@turf/turf";
import Feature from "ol/Feature";
import { toLonLat, fromLonLat } from "ol/proj";
import Circle from "ol/style/Circle";
import MultiPoint from "ol/geom/MultiPoint";
const style = new Style({
  fill: new Fill({
    color: "rgba(0,171,61,0.3)",
  }),
  stroke: new Stroke({
    color: "#00AB3D",
    width: 2,
    lineDash: [5, 5],
  }),
});
const pointFill = new Fill({
  color: "#00AB3D",
});
const pointStyle = new Style({
  image: new Circle({
    fill: pointFill,
    radius: 5,
  }),
  fill: pointFill,
});
class CORRenderOL implements CORRender {
  public inited = false;
  private hpaas: HPaaSOL;
  private areaLayer!: VectorLayer<VectorSource<Polygon>>;
  private pointLayer!: VectorLayer<VectorSource<MultiPoint>>;
  constructor(hpaas: HPaaSOL) {
    this.hpaas = hpaas;
  }
  initLayer() {
    this.areaLayer = new VectorLayer({
      source: new VectorSource({
        format: new GeoJSON(),
      }),
      style: style,
    });
    this.hpaas.olscene.addLayer(this.areaLayer);
    this.pointLayer = new VectorLayer({
      source: new VectorSource({
        format: new GeoJSON(),
      }),
      style: pointStyle,
    });
    this.hpaas.olscene.addLayer(this.pointLayer);
  }
  render(
    featureCollection: FeatureCollection<MultiPolygon>,
    pointsList: {
      lng: number;
      lat: number;
    }[]
  ) {
    this.areaLayer.getSource().clear();
    this.pointLayer.getSource().clear();
    featureCollection.features.forEach((feature) => {
      const coordinates: number[][][][] = feature.geometry.coordinates;
      const newFeature: Feature<Polygon> = new Feature();
      newFeature.setGeometry(
        new Polygon([
          coordinates[0][0].map((lonlat: number[]) => {
            return fromLonLat(lonlat);
          }),
        ])
      );
      this.areaLayer.getSource().addFeature(newFeature);
    });

    const pointCoords = pointsList.map((p) => {
      return fromLonLat([p.lng, p.lat]);
    });
    const newFeature: Feature<MultiPoint> = new Feature();
    newFeature.setGeometry(new MultiPoint(pointCoords));
    this.pointLayer.getSource().addFeature(newFeature);
  }
  bindEvent(events: eventType) {
    this.hpaas.olscene.on("pointermove", (e) => {
      const pixel = this.hpaas.olscene.getEventCoordinateInternal(e.originalEvent);
      const lonlat = toLonLat(pixel);
      const feature = this.hpaas.olscene.forEachFeatureAtPixel(pixel, function (feature) {
        return feature;
      });
      events.mousemove({
        lnglat: {
          lng: lonlat[0],
          lat: lonlat[1],
        },
        feature,
      });
    });
    this.hpaas.olscene.on("click", (e) => {
      const pixel = this.hpaas.olscene.getEventCoordinateInternal(e.originalEvent);
      const lonlat = toLonLat(pixel);
      const feature = this.hpaas.olscene.forEachFeatureAtPixel(pixel, function (feature) {
        return feature;
      });
      events.click({
        lnglat: {
          lng: lonlat[0],
          lat: lonlat[1],
        },
        feature,
      });
    });
  }
  popup = {
    show: (html: string, pos: { lng: number; lat: number }) => {},
    hide: () => {},
  };
  disableMapDrag() {}

  endableMapDrag() {}
}

export default CORRenderOL;