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

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

  constructor(hpaas: HPaaSL7, options: IOverlayOptions<IImagePointOverlayDataOption>) {
    super(hpaas, options);
    this.init();
  }
  init() {
    this.dataOption.filters.forEach((filter) => {
      this.createOneLayer(filter);
    });
  }
  createOneLayer(filter: IOverlayFilter) {
    // 拆分开
    indexBase++;
    filter.imgUrl && this.hpaas.l7Scene.addImage(this.dataOption.key + filter.name, filter.imgUrl);
    const pointLayer = new PointLayer({
      zIndex: 100 + indexBase,
      blend: "normal",
    })
      .source([], {
        parser: {
          type: "json",
          x: "lng",
          y: "lat",
        },
      })
      // .scale("point_count", {
      //   type: "quantile",
      // })
      // .shape("circle")
      .shape(this.dataOption.key + filter.name)
      .size(filter.imgSize || 10)
      // .size(4)
      .style({
        opacity: filter.imgOpacity || 1,
        strokeWidth: 0,
      });
    this.hpaas.l7Scene.addLayer(pointLayer);
    this.pointLayers.set(filter.value, pointLayer);
    if (this.dataOption.showImagePointText) {
      const textLayer = new PointLayer({
        zIndex: 101 + indexBase,
      })
        .source([], {
          parser: {
            type: "json",
            x: "lng",
            y: "lat",
          },
        })
        .shape("value", "text")
        .size(10)
        .color("#999")
        .style({
          textAnchor: "left",
          textOffset: [17, -2],
          padding: [10, 10],
          // textAllowOverlap: true,
        });
      this.hpaas.l7Scene.addLayer(textLayer);
      this.pointTextLayers.set(filter.value, textLayer);
    }
    pointLayer.on("click", (e) => {
      if (e.feature) {
        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, 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, [e.feature], filter);
        }
      }
    });
  }
  /**
   * 渲染散点图（聚合图）
   */
  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);
    this.pointTextLayers.get(filter.value)?.setData(data);
  }
  async filterByFeature(features: Feature<Polygon>[]) {
    if (features.length == 0) {
      this.filterDataByDataOption();
      return;
    }
    filterPointDataByFeatures(this.pointList, features).then((result) => {
      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() {
    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();
    });
    this.pointTextLayers.forEach((l) => {
      l.hide();
    });
  }

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

export default PointsImageOverlay;