import IHPaaS, { HPaaSType, IHpaasOptions } from "./IHPaaS";
import { HpaasEventKey, HpaasEventKeyMap, MapMode } from "./types";
import EventEmitter from "eventemitter3";
import WFSApi from "./api/wfs";
import { Deck } from "@deck.gl/core";
import { transformScale, bbox } from "@turf/turf";
// import "@/utils/logtime";
import ToolsCenter from "./tools/ToolsCenter";
import IPolygonDrawLayer from "./tools/IPolygonDrawLayer";
import PolygonDrawLayerDeckGL from "./tools/PolygonDrawLayerDeckGL";
import BaseUnitDeckGL from "./baseUnit/BaseUnitDeckGL";
import SceneDeckGL from "./scene/SceneDeckGL";
import MapCreator from "./mapInstance/DeckGLMap";

class HPaaSDeckGL implements IHPaaS {
  type: HPaaSType = "DECKGL";
  options: IHpaasOptions = {
    mode: "grey",
    initPitch: 45,
    pickMode: "none",
    show100meters: false,
    // showRoadArrow: false,
    // showRoadInfo: true,
    // 当前加载的区域是否渲染出来
    mapType: "gaode",
    wmsBaseUrl: "",
    wfsBaseUrl: "",
    center: [120.019731, 30.275082],
    zoom: 12,
    showBaseUnit: false, // 是否显示底层路网结构，包括路段+控制点
    showBaseUnitMinZoom: 12, // 显示底层路径结构的最小 zoom
  };
  scene: SceneDeckGL;
  /**
   * 底图实例，包括高德和mapbox等实例，及切换底图的能力
   */
  private mapInstance!: MapCreator;
  deckgl: any;

  sceneLoaded = false;
  polygonDrawLayer?: IPolygonDrawLayer;
  /**
   * eventbus，从此处绑定事件
   */
  events = new EventEmitter<HpaasEventKeyMap>();
  wfsApi: WFSApi;

  /**
   * 工具中心，请从此处获取标注工具的能力
   */
  toolsCenter!: ToolsCenter;

  // 基础路网单元层，默认不显示
  baseUnit?: BaseUnitDeckGL;
  mapboxContainer!: HTMLDivElement;
  deckglContainer!: HTMLCanvasElement;
  /**
   * Constructor
   * 初始化scene，默认选择高德底图
   * @param container dom容器或容器id
   * @param mapOptions 高德底图可选配置项
   */
  constructor(container: HTMLDivElement, options?: IHpaasOptions) {
    options && Object.assign(this.options, options);
    this.wfsApi = new WFSApi(this.options.wfsBaseUrl || "");
    this.initMap(container);
    this.mapInstance = new MapCreator(this);
    this.mapInstance.initMap(this.mapboxContainer);
    this.initDeckGL();
    this.scene = new SceneDeckGL(this);
    if (this.options.showBaseUnit) {
      this.baseUnit = new BaseUnitDeckGL(this);
    }
    this.toolsCenter = new ToolsCenter(this);
    this.polygonDrawLayer = new PolygonDrawLayerDeckGL(this);
  }

  initMap(container: HTMLDivElement) {
    this.mapboxContainer = document.createElement("div") as HTMLDivElement;
    this.mapboxContainer.style.width = "100%";
    this.mapboxContainer.style.height = "100%";
    this.mapboxContainer.style.position = "absolute";
    this.mapboxContainer.style.top = "0";
    this.mapboxContainer.style.left = "0";
    container.appendChild(this.mapboxContainer);
    this.deckglContainer = document.createElement("canvas");
    this.deckglContainer.id = "deck-canvas";
    this.deckglContainer.style.width = "100%";
    this.deckglContainer.style.height = "100%";
    this.deckglContainer.style.position = "absolute";
    this.deckglContainer.style.top = "0";
    this.deckglContainer.style.left = "0";
    container.appendChild(this.deckglContainer);
    this.deckglContainer.style.cursor = "pointer";
  }
  initDeckGL() {
    const center = this.options.center || [120.019731, 30.275082];
    const INITIAL_VIEW_STATE = {
      latitude: center[1],
      longitude: center[0],
      zoom: this.options.zoom,
      bearing: 0,
      pitch: this.options.initPitch,
    };

    this.deckgl = new Deck({
      canvas: this.deckglContainer,
      width: "100%",
      height: "100%",
      initialViewState: INITIAL_VIEW_STATE,
      controller: true,
      onWebGLInitialized: () => {
        setTimeout(() => {
          console.log("sceneLoaded");
          this.sceneLoaded = true;
          this.events.emit(HpaasEventKey.SCENE_LOADED);
        });
      },
      onViewStateChange: (e: { viewState: any; oldViewState: any; interactionState: any }) => {
        const { viewState } = e;
        this.mapInstance.mapboxInstance?.jumpTo({
          center: [viewState.longitude, viewState.latitude],
          zoom: viewState.zoom,
          bearing: viewState.bearing,
          pitch: viewState.pitch,
        });
      },
      layers: [],
      getCursor: ({ isDragging, isHovering }: any) => {
        if (isHovering) {
          return "pointer";
        } else {
          return isDragging ? "grabbing" : "grab";
        }
      },
    });
    return this.deckgl;
  }
  /**
   * 移动视图到某区域
   * @param areaUid 区域uid
   */
  async fitToArea(areaUid: string) {
    const area = await this.wfsApi.queryAreaByUid(areaUid);
    if (area.features) {
      const nf = transformScale(area, 1.2);
      const b = bbox(nf);
      console.log(b);
      this.scene.fitBounds(b);
    }
  }
  setDisplayMode(mode: MapMode) {
    this.mapInstance.setDisplayMode(mode);
  }

  destroy() {}
}

export default HPaaSDeckGL;