import { bbox, Feature, featureCollection, FeatureCollection, LineString, transformScale } from "@turf/turf";
import ToolBase from "../../base/ToolBase";
import { SelectEventMap } from "../../../types";
import IHPaaS from "../../../../../modules/hpaas-core/IHPaaS";
import ToolsCenter from "../../ToolsCenter";
import IRender from "./IRender";
import RenderDeckGL from "./renderDeckGL";
import RenderL7 from "./renderL7";
export interface mouseEventType {
  lnglat: {
    lng: number;
    lat: number;
  };
  feature: Feature;
}
class RoadSelector extends ToolBase<SelectEventMap> {
  hpaas: IHPaaS;
  // 选择的粒度，默认是整条路，可选路段粒度
  private selectMode: "road" | "segment" = "road";
  private isSelecting = false;
  private selectedRoadName = "";
  private render: IRender;

  private selectedFeatures: FeatureCollection<LineString> = featureCollection([]);

  //当时选择路段的模式的时候，选中的路段
  private selectedFeature?: Feature<LineString>;

  private showSelectedRoadName = true;
  toolsCenter: ToolsCenter;
  //   private sourceFeatures: PolygonFeatureType[] = [];
  constructor(toolsCenter: ToolsCenter) {
    super();
    this.toolsCenter = toolsCenter;
    this.hpaas = toolsCenter.hpaas;
    if (this.hpaas.type == "L7") {
      this.render = new RenderL7(this);
    } else if (this.hpaas.type == "DECKGL") {
      this.render = new RenderDeckGL(this);
    } else {
      this.render = new RenderDeckGL(this);
    }
    this.render.initLayer();
    this._bindEvent();
  }

  _bindEvent() {
    this.render.bindEvent({
      click: this._mouseclickEventHandler,
      mousemove: this._mousemoveEventHandler,
    });
    // this.hpaas.scene.on("mousemove", this._mousemoveEventHandler);
    // this.hpaas.scene.on("click", this._mouseclickEventHandler);
  }

  _mouseclickEventHandler = async (e: mouseEventType) => {
    if (this.isSelecting && e) {
      const lng = e.lnglat.lng;
      const lat = e.lnglat.lat;
      this.selectedFeatures.features = [];
      const result = await this.hpaas.wfsApi.querySegmentFeaturesAtPoint(lng, lat);
      if (result && result.features.length) {
        const feature = result.features[0];
        if (this.selectMode == "road") {
          if (feature.properties?.road_name && feature.properties?.road_name != "未命名道路") {
            const roadResult = await this.hpaas.wfsApi.querySegmentFeaturesByRoadUid(feature.properties?.road_uid);
            console.log(roadResult);
            roadResult.features.forEach((feature) => {
              this.selectedFeatures.features.push(feature);
            });
            this.selectedRoadName = feature.properties?.road_name;
          } else {
            this.selectedFeatures.features.push(feature);
            this.selectedRoadName = "无名路段";
          }
          this._fitBounds(this.selectedFeatures);
          this.emit("ROAD_PICK", this.selectedFeatures, [lng, lat]);
        } else if (this.selectMode == "segment") {
          this.selectedFeature = feature;
          this.selectedFeatures.features = [feature];
          this.selectedRoadName = feature.properties?.name || feature.properties?.road_name;
          this._fitBounds(this.selectedFeature);
          this.emit("SEGMENT_PICK", this.selectedFeature, [lng, lat]);
        }
      }
      this.render.render(this.selectedFeatures);
      // this.pointLayer.setData(this.points);
    }
  };
  _fitBounds(f: FeatureCollection | Feature) {
    const nf = transformScale(f, 3);
    const b = bbox(nf);
    this.render.fitBounds(b);
  }
  _mousemoveEventHandler = (e: mouseEventType) => {
    if (this.isSelecting && e) {
      const lng = e.lnglat.lng;
      const lat = e.lnglat.lat;
      this.render.popup.html(`<div style="font-size:12px;text-align:left;">点击道路选择</div>`);
      this.render.popup.pos({ lng, lat });
      this.render.popup.show();
    }
  };

  //   render() {
  //     this.lineLayer?.setData(this.selectedFeatures);
  //     this.borderLayer?.setData(this.selectedFeatures);

  //     // this.markerLayer?.clear();
  //     // if (this.selectedRoadName && this.showSelectedRoadName) {
  //     //   const center = center(this.selectedFeatures);
  //     //   console.log(center);
  //     //   const el = document.createElement("div");
  //     //   el.textContent = this.selectedRoadName;
  //     //   Object.assign(el.style, {
  //     //     fontSize: "14px",
  //     //     fontweight: "600",
  //     //     background: "#3B9EF7",
  //     //     boxSizing: "border-box",
  //     //     color: "rgba(255, 255, 255, 0.8)",
  //     //     padding: "3px 10px",
  //     //     border: "2px solid #fff",
  //     //     borderRadius: "20px",
  //     //   });
  //     //   const marker = new Marker({
  //     //     element: el,
  //     //   }).setLnglat({
  //     //     lng: center.geometry?.coordinates[0] || 0,
  //     //     lat: center.geometry?.coordinates[1] || 0,
  //     //   });
  //     //   this.markerLayer?.addMarker(marker);
  //     // }
  //     // this.markerLayer && this.hpaas.scene.addMarkerLayer(this.markerLayer);
  //   }

  setStatus(status: boolean) {
    this.isSelecting = status;
  }

  begin(mode: "road" | "segment") {
    this.selectMode = mode;
    this.isSelecting = true;
  }

  end() {
    this.isSelecting = false;
    this.render.popup.hide();
  }
  clear() {
    this.isSelecting = false;
    this.selectedFeatures.features = [];
    this.selectedFeature = undefined;
    this.render.reset();
    // this.markerLayer && this.hpaas.scene.removeMarkerLayer(this.markerLayer);
  }
}

export default RoadSelector;