import { IMapWrapper, Scale, Scene, Zoom } from "@antv/l7";
import { GaodeMap, Mapbox } from "@antv/l7-maps";
import { Map, AnyLayer } from "mapbox-gl";
import qs from "qs";
import HPaaSDeckGL from "../HPaaSDeckGL";
import IHPaaS from "../IHPaaS";
import { MapMode } from "../types";

const wmsOptionsBase = {
  VERSION: "1.3.0",
  TRANSPARENT: "true",
  FORMAT: "image/png",
  FORMAT_OPTIONS: "antialias:on;dpi:200",
  width: 512,
  height: 512,
  CRS: "EPSG:900913",
};

class MapCreator {
  amapInstance?: AMap.Map;
  mapboxInstance?: Map;
  hpaas: IHPaaS;
  map!: IMapWrapper;
  scene!: Scene;

  private wmsLayers = {
    grey: "hpaas:hpaas-map-grey",
    dark: "hpaas:hpaas-map-dark",
  };
  private wms100meterLayers = {
    grey: "hpaas:100meters",
    dark: "hpaas:100meters",
  };
  private wmsOptionsGrey: any;
  private wmsOptionsDark: any;
  constructor(hpaas: HPaaSDeckGL) {
    this.hpaas = hpaas;
    if (this.hpaas.options.wmsLayers?.grey) {
      this.wmsLayers.grey = this.hpaas.options.wmsLayers.grey;
    }
    if (this.hpaas.options.wmsLayers?.dark) {
      this.wmsLayers.dark = this.hpaas.options.wmsLayers.dark;
    }
    this.wmsOptionsGrey = Object.assign(
      {
        LAYERS: this.wmsLayers.grey + (this.hpaas.options.show100meters ? "," + this.wms100meterLayers.grey : ""),
        BGCOLOR: "0xB2CEFE",
      },
      wmsOptionsBase
    );
    this.wmsOptionsDark = Object.assign(
      {
        LAYERS: this.wmsLayers.dark + (this.hpaas.options.show100meters ? "," + this.wms100meterLayers.dark : ""),
        BGCOLOR: "0xB2CEFE",
      },
      wmsOptionsBase
    );
  }

  initMap(container: HTMLDivElement) {
    const mapInstance = new Map({
      container: container,
      zoom: this.hpaas.options.zoom,
      center: this.hpaas.options.center,
      pitch: this.hpaas.options.initPitch,
    });
    mapInstance.getCanvasContainer().style.cursor = "pointer";
    if (this.hpaas.options.wmsBaseUrl) {
      mapInstance.addSource("wms-source-dark", {
        type: "raster",
        tiles: [
          this.hpaas.options.wmsBaseUrl +
            "?bbox={bbox-epsg-3857}&service=WMS&request=GetMap&" +
            qs.stringify(this.wmsOptionsDark),
        ],
        tileSize: 256,
      });
      mapInstance.addSource("wms-source-grey", {
        type: "raster",
        tiles: [
          // "http://10.0.10.174:9999/geoserver/gwc/service/wmts?REQUEST=GetTile&SERVICE=WMTS" +
          //   "&VERSION=1.0.0&LAYER=hpaas:hpaas-map-dark&STYLE=&TILEMATRIX=EPSG:900913x2:{z}" +
          //   "&TILEMATRIXSET=EPSG:900913x2&FORMAT=image/png" +
          //   "&TILECOL={x}&TILEROW={y}",
          this.hpaas.options.wmsBaseUrl +
            "?bbox={bbox-epsg-3857}&service=WMS&request=GetMap&" +
            qs.stringify(this.wmsOptionsGrey),
        ],
        tileSize: 256,
      });
      const layer: AnyLayer = {
        id: "wms-layer",
        type: "raster",
        source: this.hpaas.options.mode == "grey" ? "wms-source-grey" : "wms-source-dark",
        paint: {},
      };
      // 延迟显示layer，防止阻塞事件和其他请求
      setTimeout(() => {
        mapInstance.addLayer(layer);
      }, 500);

      this.mapboxInstance = mapInstance;
    }
    if (this.hpaas.options.mode == "dark") {
      container.style.background = "#070708";
    } else {
      container.style.background = "#B2CEFE";
    }
    const mapbox = new Mapbox({
      mapInstance: mapInstance,
    });
    this.map = mapbox;

    return this.map;
  }

  /**
   * 切换亮暗主题
   */
  setDisplayMode(mode: MapMode) {
    console.log("setDisplayMode", mode);
    if (this.mapboxInstance) {
      const sourceId = mode == "dark" ? "wms-source-dark" : "wms-source-grey";
      //   (this.mapboxInstance.getLayer("wms-layer") as mapboxgl.RasterLayer).source = sourceId;
      this.mapboxInstance.removeLayer("wms-layer");
      const layer: AnyLayer = {
        id: "wms-layer",
        type: "raster",
        source: sourceId,
        paint: {},
      };
      this.mapboxInstance.addLayer(layer);
      if (mode == "dark") {
        this.mapboxInstance.getContainer().style.background = "#070708";
      } else {
        this.mapboxInstance.getContainer().style.background = "#B2CEFE";
      }
    }
  }
}
export default MapCreator;