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 HPaaSL7 from "../HPaaSL7";
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,
  // EXCEPTIONS: "application%2Fvnd.ogc.se_inimage",
  CRS: "EPSG:900913",
};

class MapCreator {
  amapInstance?: AMap.Map;
  mapboxInstance?: Map;
  hpaas: HPaaSL7;
  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: HPaaSL7) {
    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) {
    if (this.hpaas.options.mapType == "gaode") {
      let wms: any;
      this.hpaas.options.wmsBaseUrl &&
        (wms = new AMap.TileLayer.WMS({
          url: this.hpaas.options.wmsBaseUrl, // wms服务的url地址
          params: this.wmsOptionsGrey, // OGC标准的WMS地图服务的GetMap接口的参数
          tileSize: 256,
        }));

      this.amapInstance = new AMap.Map(container, {
        viewMode: "3D",
        zoom: this.hpaas.options.zoom, // 初始化地图层级
        center: this.hpaas.options.center,
        mapStyle: "amap://styles/whitesmoke",
        pitch: this.hpaas.options.initPitch,
        // center: [106.770204, 31.367713],
        layers: wms ? [wms] : [],
        features: ["bg", "road"],
        keyboardEnable: false,
        showLabel: true,
        defaultCursor: "pointer",
        isHotspot: false,
        showBuildingBlock: false,
        pitchEnable: true,
        animateEnable: true,
        rotateEnable: false,
        showIndoorMap: false,
        jogEnable: false,
        buildingAnimation: false,
      });

      //   this.amapInstance.add(wms);
      this.map = new GaodeMap({
        mapInstance: this.amapInstance,
      });
    } else if (this.hpaas.options.mapType == "mapbox") {
      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;
    }
    this.scene = new Scene({
      id: container,
      antialias: true,
      logoVisible: false,
      map: this.map,
    });

    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";
      }
    } else if (this.amapInstance) {
      const wms = new AMap.TileLayer.WMS({
        url: this.hpaas.options.wmsBaseUrl, // wms服务的url地址
        params: mode == "dark" ? this.wmsOptionsDark : this.wmsOptionsGrey, // OGC标准的WMS地图服务的GetMap接口的参数
        tileSize: 512,
      });
      this.amapInstance.setLayers([wms]);
    }
  }
}
export default MapCreator;