import { MarkerLayer, Marker, ILayer, LineLayer, PolygonLayer } from "@antv/l7";
import HPaaSL7 from "../HPaaSL7";
import PolygonStore, { PolygonFeatureType } from "./data/PolygonStore";
import { EventEmitter } from "eventemitter3";
import IPolygonDrawLayer from "./IPolygonDrawLayer";
import { center, featureCollection } from "@turf/turf";

// 为所有此类管理的overlay计数，用来做zIndex的基础值，保证图层互相覆盖的规则。
let indexBase = 1;
class DrawPolygonLayerl7 extends EventEmitter implements IPolygonDrawLayer {
  private areaBorderLayer!: ILayer;
  private areaBgLayer!: ILayer;

  private markerLayer = new MarkerLayer({});

  public store: PolygonStore;

  hpaas: HPaaSL7;
  constructor(hpaas: HPaaSL7) {
    super();
    this.hpaas = hpaas;
    this.store = new PolygonStore();
    // 监听 store 变化
    this.store.on("updateFeature", () => {
      this.render();
    });
    this.init();
  }
  init() {
    this.createOneLayer();
    // 添加实际控制图层的类到 map 的 collection 中，以便获取并调用方法
  }
  createOneLayer() {
    // 拆分开
    indexBase++;
    // 区域边界线
    this.areaBorderLayer = new LineLayer({
      zIndex: 80 + indexBase,
    })
      .source(featureCollection([]))
      .style({
        lineType: "dash",
        dashArray: [2, 2],
      })
      .size("active", (active) => {
        if (active) return 2;
        return 1;
      })
      .shape("line")
      .color("active", (active) => {
        if (active) return "#00AB3D";
        return "#FF8A00";
      })
      .style({
        opacity: 1,
        cursor: "pointer",
      });
    this.hpaas.l7Scene.addLayer(this.areaBorderLayer);
    // 区域边界线
    this.areaBgLayer = new PolygonLayer({
      zIndex: 80 + indexBase,
    })
      .source(featureCollection([]), {})
      .color("color*active", (color, active) => {
        if (active) return "#00AB3D";
        if (color) return color;
        return "#F65252";
      })
      .shape("fill")
      .style({
        opacity: 0.3,
        cursor: "pointer",
      });

    this.hpaas.l7Scene.addLayer(this.areaBgLayer);

    this.hpaas.l7Scene.addMarkerLayer(this.markerLayer);
  }

  setData(features: PolygonFeatureType[]) {
    if (!this.hpaas.sceneLoaded) {
      this.hpaas.l7Scene.on("loaded", () => {
        this.setData(features);
      });
      return;
    }
    this.store.features = features;
    this.render();
  }
  addData(features: PolygonFeatureType[]) {
    if (!this.hpaas.sceneLoaded) {
      this.hpaas.l7Scene.on("loaded", () => {
        this.setData(features);
      });
      return;
    }
    this.store.features = this.store.features.concat(features);
    this.render();
  }
  render() {
    // this.clear();

    const _featureCollection = featureCollection(this.store.features);

    this.markerLayer.clear();
    this.markerLayer = new MarkerLayer();

    /**
     * 生成区域的标注 dom
     */
    this.store.features.forEach((p) => {
      const _center = center(p);

      const el = document.createElement("div");
      el.className = "map-area-name";
      el.textContent = p.properties.name?.toString() || null;
      el.style.background = p.properties?.color || "#aaa";
      Object.assign(el.style, {
        fontSize: "14px",
        fontWeight: 600,
        boxSizing: "border-box",
        color: "rgba(255, 255, 255, 0.8)",
        padding: "3px 10px",
        borderRadius: "20px",
      });
      const areaNameLayer = new Marker({
        element: el,
      }).setLnglat({
        lng: _center.geometry?.coordinates[0] || 0,
        lat: _center.geometry?.coordinates[1] || 0,
      });
      // console.log("center", el);

      this.markerLayer.addMarker(areaNameLayer);
    });

    this.hpaas.l7Scene.addMarkerLayer(this.markerLayer);
    this.areaBgLayer.setData(_featureCollection);
    this.areaBorderLayer.setData(_featureCollection);
  }
  reset() {
    this.store.reset();
    this.render();
  }
}

export default DrawPolygonLayerl7;