import PolygonStore, { PolygonFeatureType } from "./data/PolygonStore";
import { EventEmitter } from "eventemitter3";
import HPaaSDeckGL from "../HPaaSDeckGL";
import { GeoJsonLayer, TextLayer } from "@deck.gl/layers";
import { PathStyleExtension } from "@deck.gl/extensions";
import { HpaasEventKey } from "../types";
import { center, Feature, featureCollection, FeatureCollection, Point } from "@turf/turf";
import convert from "color-convert";
let index = 1;
// 为所有此类管理的overlay计数，用来做zIndex的基础值，保证图层互相覆盖的规则。
class PolygonDrawLayerDeckGL extends EventEmitter {
  private bgLayer?: any;
  private textLayer?: any;
  //   private markerLayer = new MarkerLayer({});

  public store: PolygonStore;

  hpaas: HPaaSDeckGL;
  constructor(hpaas: HPaaSDeckGL) {
    super();
    this.hpaas = hpaas;
    this.store = new PolygonStore();
    // 监听 store 变化
    this.store.on("updateFeature", () => {
      this.render();
    });
    // setTimeout(() => {
    this.init();
    // }, 1000);
  }
  init() {
    // if (!this.hpaas.sceneLoaded) {
    //   this.hpaas.events.on(HpaasEventKey.SCENE_LOADED, () => {
    //     this.init();
    //   });
    //   return;
    // }
    this.createOneLayer();
    this.createTextLayer();
  }
  createOneLayer(data?: FeatureCollection) {
    this.bgLayer = new GeoJsonLayer({
      id: "PolygonDrawLayerDeckGL-layer" + index++,
      data: data ? data : featureCollection([]),
      pickable: true,
      stroked: true,
      filled: true,
      //   extruded: true,
      getFillColor: (f: PolygonFeatureType) => {
        if (f.properties.active) return convert.hex.rgb("#00AB3D").concat([255 * 0.3]);
        if (f.properties.color) return convert.hex.rgb(f.properties.color).concat([255 * 0.3]);
        return [0, 171, 61, 255 * 0.3];
      },
      getLineColor: (f: PolygonFeatureType) => {
        if (f.properties.active) return convert.hex.rgb("#00AB3D").concat([255]);
        return convert.hex.rgb("FF8A00").concat([255]);
      },
      getLineWidth: (f: PolygonFeatureType) => {
        if (f.properties.active) return 3;
        return 2;
      },
      //   getElevation: () => 10,
      lineWidthUnits: "pixels",
      getDashArray: [4, 4],
      dashJustified: "highPrecisionDash",
      material: { ambient: 0.8, diffuse: 0.9, shininess: 23, specularColor: [200, 200, 200] },
      extensions: [new PathStyleExtension({ dash: true })],
    });
    this.hpaas.scene.addLayer(this.bgLayer);
  }
  createTextLayer(data: Feature<Point>[] = []) {
    this.textLayer = new TextLayer({
      id: "PolygonDrawLayerDeckGL-text-layer" + index++,
      data: data,
      //   pickable: true,
      getPosition: (d: Feature<Point>) => {
        return d.geometry.coordinates;
      },
      getText: (d: Feature<Point>) => {
        return d.properties?.name || "";
      },
      getSize: 14,
      background: true,
      getBackgroundColor: (f: PolygonFeatureType) => {
        if (f.properties.color) return convert.hex.rgb(f.properties.color).concat([255]);
        return convert.hex.rgb("333333");
      },
      getColor: [255, 255, 255],
      backgroundPadding: [7, 3],
      getAngle: 0,
      characterSet: "auto",
      getTextAnchor: "middle",
      getAlignmentBaseline: "center",
    });
    this.hpaas.scene.addLayer(this.textLayer);
  }

  setData(features: PolygonFeatureType[]) {
    if (!this.hpaas.sceneLoaded) {
      this.hpaas.events.on(HpaasEventKey.SCENE_LOADED, () => {
        this.setData(features);
      });
      return;
    }
    this.store.features = features;
    this.render();
  }

  addData(features: PolygonFeatureType[]) {
    if (!this.hpaas.sceneLoaded) {
      this.hpaas.events.on(HpaasEventKey.SCENE_LOADED, () => {
        this.addData(features);
      });
      return;
    }
    this.store.features = this.store.features.concat(features);
    this.render();
  }
  private render() {
    try {
      const _featureCollection = featureCollection(this.store.features);
      this.hpaas.scene.setData(this.bgLayer, _featureCollection);
      //   this.bgLayer?.updateState({ props: { data: featureCollection }, changeFlags: { dataChanged: true } });
      //   this.hpaas.removeLayer(this.bgLayer);
      const features: Feature<Point>[] = [];
      this.store.features.forEach((f) => {
        if (!f.properties.name) return;
        const _center = center(f);
        Object.assign(_center.properties, f.properties);
        features.push(_center);
      });
      this.hpaas.scene.removeLayer(this.textLayer);
      this.createTextLayer(features);
      //   this.hpaas.scene.setData(this.textLayer, features);
    } catch (e) {
      console.log(e);
    }
  }
  reset() {
    this.store.reset();
    this.render();
  }
}

export default PolygonDrawLayerDeckGL;