import { filterPointDataByFeatures } from "../../../../components/report/worker";
import { Scene, MarkerLayer, Marker, PointLayer, ILayer, Layers } from "@antv/l7";
import { Feature, Polygon } from "@turf/turf";
import HPaaSL7 from "../../HPaaSL7";
import Overlay, { OverlayEventKeys } from "./../Overlay";
import {
  IOverlayFilter,
  IOverlayOptions,
  IPointOverlayDataOption,
  PointOverlayDataWithValue,
} from "./../overlay.types";
import Tooltips from "./../Tooltips";

// 为所有此类管理的overlay计数，用来做zIndex的基础值，保证图层互相覆盖的规则。
let indexBase = 1;
class PointsOverlay extends Overlay<IPointOverlayDataOption> {
  pointLayers = new Map<any, ILayer>();
  tooltips!: Tooltips;
  pointList!: PointOverlayDataWithValue[];

  constructor(hpaas: HPaaSL7, options: IOverlayOptions<IPointOverlayDataOption>) {
    super(hpaas, options);

    this.tooltips = new Tooltips(hpaas, this.dataOption.key, -1);
    this.init();
  }

  init() {
    this.dataOption.filters.forEach((filter) => {
      this.createOneLayer(filter);
    });
  }
  private createOneLayer(filter: IOverlayFilter) {
    // 拆分开
    indexBase++;

    const pointLayer = new PointLayer({
      zIndex: 100 + indexBase,
      // enablePicking: true,
    })
      .source([], {
        parser: {
          type: "json",
          x: "lng",
          y: "lat",
        },
      })
      .shape("circle")
      .size(this.dataOption.size || 5)
      .active(true)
      .color(filter.color || "#000")
      .style({
        opacity: 1,
        strokeWidth: 0,
      });
    this.hpaas.l7Scene.addLayer(pointLayer);
    this.pointLayers.set(filter.value, pointLayer);

    // // const tooltipDom = document.createElement("img");
    // // tooltipDom.src = "/tooltip-demo.png";
    // // tooltipDom.style.width = "300px";
    // // tooltipDom.addEventListener("click", () => {
    // //   window.location.href = "#journey";
    // // });
    // let lastFeatureId = 0;
    // // 鼠标是否在点或者tooltip内，如果不在有个定时器关闭tooltip
    // let mouseIsInTooltipOrPoint = false;
    // pointLayer.on("mousemove", (e) => {
    //   if (e.feature) {
    //     mouseIsInTooltipOrPoint = true;
    //     const id = e.feature.id || e.feature._id;
    //     this.tooltips.moveTo(e.lngLat.lng, e.lngLat.lat);
    //     if (id != lastFeatureId) {
    //       if (e.feature.cluster) {
    //         const source = pointLayer.getSource();
    //         const dataList = source.getClustersLeaves(e.feature.cluster_id).map((d: any) => {
    //           return d.properties;
    //         });
    //         this.tooltips.show();
    //         this.emit(OverlayEventKeys.SHOW_TOOLTIP, this.dataOption.key, dataList, filter);

    //         // e.feature.coordinates &&
    //         //   e.feature.coordinates.length &&
    //         //   this.tooltips.moveTo(e.lngLat.lng, e.lngLat.lat).show();
    //       } else if (e.feature.lng && e.feature.lat) {
    //         this.tooltips.show();
    //         this.emit(OverlayEventKeys.SHOW_TOOLTIP, this.dataOption.key, [e.feature], filter);
    //       }
    //       lastFeatureId = id;
    //     }
    //   }
    // });

    // pointLayer.on("mouseout", (e) => {
    //   console.log("point mouseout");
    //   mouseIsInTooltipOrPoint = false;
    //   setTimeout(() => {
    //     if (!mouseIsInTooltipOrPoint) {
    //       console.log("point hide tooltips");
    //       lastFeatureId = -1;
    //       this.emit(OverlayEventKeys.HIDE_TOOLTIP);
    //       this.tooltips.hide();
    //     }
    //   }, 500);
    // });
    // this.tooltips.ele.addEventListener("mousemove", (e) => {
    //   e.stopPropagation();
    // });
    // this.tooltips.ele.addEventListener("wheel", (e) => {
    //   e.stopPropagation();
    // });
    // this.tooltips.ele.addEventListener("mouseenter", () => {
    //   mouseIsInTooltipOrPoint = true;
    // });
    // this.tooltips.ele.addEventListener("mouseleave", () => {
    //   mouseIsInTooltipOrPoint = false;
    //   console.log("hide tooltips");
    //   lastFeatureId = -1;
    //   this.emit(OverlayEventKeys.HIDE_TOOLTIP);
    //   this.tooltips.hide();
    // });
  }
  /**
   * 点
   */
  renderData(pointList: PointOverlayDataWithValue[]) {
    this.pointList = pointList;

    // this.clear();

    // this.dataOption.filters.forEach((filter) => {
    //   let filteredList = [];
    //   if (filter.value == "*") {
    //     filteredList = this.pointList;
    //   } else {
    //     filteredList = this.pointList.filter((d) => {
    //       return d.value == filter.value;
    //     });
    //   }
    //   filter.totalCount = filteredList.length;
    //   this.updateData(filter, filteredList);
    // });
    this.filterDataByDataOption();
  }

  private updateData(filter: IOverlayFilter, data: PointOverlayDataWithValue[]) {
    if (!this.hpaas.sceneLoaded) {
      this.hpaas.l7Scene.on("loaded", () => {
        this.updateData(filter, data);
      });
      return;
    }

    this.pointLayers.get(filter.value)?.setData(data);
  }
  async filterByFeature(features: Feature<Polygon>[]) {
    if (features.length == 0) {
      this.filterDataByDataOption();
      return;
    }
    const result = await filterPointDataByFeatures(this.pointList, features);
    this.dataOption.filters.forEach((filter) => {
      const filteredList = filter.checked
        ? result.filter((d) => {
            return filter.value == "*" || d.value == filter.value;
          })
        : [];
      filter.totalCount = filteredList.length;
      this.updateData(filter, filteredList);
    });
  }
  /**
   * 根据 value 过滤数据，并重新渲染
   * @param value
   */
  filterDataByDataOption() {
    console.log("filterDataByDataOption");

    if (this.dataOption.show) {
      this.show();
      this.dataOption.filters.forEach((filter) => {
        const filteredList = filter.checked
          ? this.pointList.filter((d) => {
              return filter.value == "*" || d.value == filter.value;
            })
          : [];
        filter.totalCount = filteredList.length;
        this.updateData(filter, filteredList);
      });
    } else {
      this.hide();
      this.dataOption.filters.forEach((filter) => {
        this.updateData(filter, []);
      });
    }
  }

  hide() {
    this.pointLayers.forEach((l) => {
      l.hide();
    });
  }

  show() {
    this.pointLayers.forEach((l) => {
      l.show();
    });
  }
  // clear() {
  //   this.pointLayers.forEach((l) => {
  //     this.hpaas.scene.removeLayer(l);
  //     l.clear();
  //     l.destroy();
  //   });
  //   this.pointTextLayers.forEach((l) => {
  //     this.hpaas.scene.removeLayer(l);
  //     l.clear();
  //     l.destroy();
  //   });
  //   this.pointLayers.clear();
  //   this.pointTextLayers.clear();
  // }
}

export default PointsOverlay;