import { BBox, featureCollection, FeatureCollection } from "@turf/turf";
import IRender, { eventType } from "./IRender";
import HPaaSDeckGL from "../../../HPaaSDeckGL";
// import { GeoJsonLayer } from "deck.gl";
import { GeoJsonLayer } from "@deck.gl/layers";
import { PathStyleExtension } from "@deck.gl/extensions";
import RoadSelector from "./RoadSelector";
import convert from "color-convert";
let layerIndex = 1;
class RenderDeckGL implements IRender {
  private lineLayer?: any;
  private bgLayer?: any;
  private hpaas: HPaaSDeckGL;
  public inited = false;
  private tool: RoadSelector;

  constructor(tool: RoadSelector) {
    this.hpaas = tool.hpaas as HPaaSDeckGL;
    this.tool = tool;
  }
  initLayer() {
    this.inited = true;
    this.bgLayer = this.createBgLayer();
    this.hpaas.scene.addLayer(this.bgLayer);
    this.lineLayer = this.createLineLayer();
    this.hpaas.scene.addLayer(this.lineLayer);
  }
  private createBgLayer() {
    return new GeoJsonLayer({
      id: "roadselect-bg-layer" + layerIndex++,
      data: featureCollection([]),
      //   pickable: true,
      stroked: true,
      filled: true,
      //   extruded: true,
      getLineColor: convert.hex.rgb("333333"),
      getLineWidth: 7,
      //   getWidth: 3,
      lineWidthUnits: "pixels",
      getDashArray: [2, 2],
      //   dashJustified: true,
      extensions: [new PathStyleExtension({ dash: true })],
    });
  }
  private createLineLayer() {
    return new GeoJsonLayer({
      id: "roadselect-line-layer" + layerIndex++,
      data: featureCollection([]),
      //   pickable: true,
      stroked: true,
      filled: true,
      //   extruded: true,
      getLineColor: convert.hex.rgb("3B9EF7"),
      getLineWidth: 5,
      //   getWidth: 3,
      lineWidthUnits: "pixels",
      //   getDashArray: [5, 5],
      //   dashJustified: true,
      //   extensions: [new PathStyleExtension({ dash: true })],
    });
  }

  render(featureCollection: FeatureCollection) {
    this.hpaas.scene.setData(this.lineLayer, featureCollection);
    this.hpaas.scene.setData(this.bgLayer, featureCollection);
  }

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

  popup = {
    html: (html: string) => {
      this.hpaas.scene.popup.html(html);
    },
    pos: (pos: { lng: number; lat: number }) => {},
    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();
    },
  };

  fitBounds(b: BBox) {
    (this.tool.hpaas as HPaaSDeckGL).scene.fitBounds(b);
    //   this.hpaas.deckgl.
  }
  reset() {
    this.popup.hide();
    this.render(featureCollection([]));
  }
}

export default RenderDeckGL;