//按mars3d规范，封装的pbf图层

(function (window) {
  let BasicRenderer = window.mapboxRenderer.BasicRenderer;

  // 创建一个全局变量作为pbfBasicRenderer渲染模板，避免出现16个canvas上下文的浏览器限制，以便Cesium ImageLayer.destory()正常工作。
  // https://github.com/mapbox/mapbox-gl-js/issues/7332
  const OFFSCREEN_CANV_SIZE = 1024;
  const baseCanv = document.createElement("canvas");
  baseCanv.style.imageRendering = "pixelated";
  baseCanv.addEventListener("webglcontextlost", () => console.log("webglcontextlost"), false);
  baseCanv.width = OFFSCREEN_CANV_SIZE;
  baseCanv.height = OFFSCREEN_CANV_SIZE;

  class MVTImageryProvider {
    /**
     * create a MVTImageryProvider Object
     * @param options MVTImageryProvider options
     * @param options.style - mapbox style object
     * @param options.sourceFilter - sourceFilter is used to filter which source participate in pickFeature process.
     * @param options.maximumLevel - if cesium zoom level exceeds maximumLevel, layer will be invisible.
     * @param options.minimumLevel - if cesium zoom level belows minimumLevel, layer will be invisible.
     * @param options.tileSize - can be 256 or 512. 256 default
     * @param options.headers - url fetch request headers
     * @param options.tilingScheme - Cesium tilingScheme, default WebMercatorTilingScheme(EPSG: 3857)
     */
    constructor(options) {
      this.options = options;

      let pbfStyle = options.style;
      this.mapboxRenderer = new BasicRenderer({
        style: pbfStyle,
        transformRequest: (url) => this.transformRequest(url),
      });

      this.mapboxRenderer._canvas = baseCanv;
      this.mapboxRenderer._canvas.addEventListener("webglcontextrestored", () => this.mapboxRenderer._createGlContext(), false);
      this.mapboxRenderer._createGlContext();

      if (options.showCanvas) {
        this.mapboxRenderer.showCanvasForDebug();
      }

      this.ready = false;
      this.readyPromise = this.mapboxRenderer._style.loadedPromise.then(() => {
        this.ready = true;
      });

      this.tilingScheme = options.tilingScheme ?? new Cesium.WebMercatorTilingScheme();
      this.rectangle = this.tilingScheme.rectangle;
      this.tileSize = this.tileWidth = this.tileHeight = options.tileSize || 1024;
      this.maximumLevel = options.maximumLevel || Number.MAX_SAFE_INTEGER;
      this.minimumLevel = options.minimumLevel || 0;
      this.tileDiscardPolicy = undefined;
      //this.errorEvent = new Cesium.Event();
      this.credit = new Cesium.Credit(options.credit || "", false);
      this.proxy = new Cesium.DefaultProxy("");
      this.hasAlphaChannel = options.hasAlphaChannel ?? true;
      this.sourceFilter = options.sourceFilter;
    }

    transformRequest = (url) => {
      if (this.options.headers) {
        return {
          url,
          headers: this.options.headers,
        };
      }
      return {
        url,
      };
    };

    createTile() {
      const canv = document.createElement("canvas");
      canv.width = this.tileSize;
      canv.height = this.tileSize;
      canv.style.imageRendering = "pixelated";
      const ctx = canv.getContext("2d");
      if (ctx) {
        ctx.globalCompositeOperation = "copy";
      }
      return canv;
    }

    async canvasToImage(canvas) {
      const img = new Image();
      return new Promise((resolve) => {
        img.onload = function () {
          resolve(img);
        };
        img.crossOrigin = "";
        img.src = canvas.toDataURL("image/png");
      });
    }

    requestImage(x, y, zoom, releaseTile = true) {
      if (zoom > this.maximumLevel || zoom < this.minimumLevel) {
        return Promise.reject(undefined);
      }

      this.mapboxRenderer.filterForZoom(zoom);
      const tilesSpec = [];
      this.mapboxRenderer.getVisibleSources(zoom).forEach((s) => {
        tilesSpec.push({
          source: s,
          z: zoom,
          x: x,
          y: y,
          left: 0,
          top: 0,
          size: this.tileSize,
        });
      });

      return new Promise((resolve, reject) => {
        const canv = this.createTile();
        const renderRef = this.mapboxRenderer.renderTiles(
          canv.getContext("2d"),
          {
            srcLeft: 0,
            srcTop: 0,
            width: this.tileSize,
            height: this.tileSize,
            destLeft: 0,
            destTop: 0,
          },
          tilesSpec,
          async (err) => {
            if (!!err) {
              switch (err) {
                case "canceled":
                case "fully-canceled":
                  reject(undefined);
                  break;
                default:
                  reject(undefined);
              }
            } else {
              if (releaseTile) {
                renderRef.consumer.ctx = null;
                const img = await this.canvasToImage(canv);
                resolve(img);
                // releaseTile默认为true，对应Cesium请求图像的情形
                this.mapboxRenderer.releaseRender(renderRef);
                this.mapboxRenderer._style.sourceCaches?.origin?._tileCache.reset();
              } else {
                // releaseTile为false时在由pickFeature手动调用，在渲染完成之后在pickFeature里边手动释放tile
                resolve(renderRef);
              }
            }
          }
        );
      });
    }

    pickFeatures(x, y, zoom, longitude, latitude) {
      return this.requestImage(x, y, zoom, false)?.then((renderRef) => {
        let targetSources = this.mapboxRenderer.getVisibleSources(zoom);
        targetSources = this.sourceFilter ? this.sourceFilter(targetSources) : targetSources;

        const queryResult = [];

        const lng = Cesium.Math.toDegrees(longitude);
        const lat = Cesium.Math.toDegrees(latitude);

        targetSources.forEach((s) => {
          queryResult.push({
            data: this.mapboxRenderer.queryRenderedFeatures({
              source: s,
              renderedZoom: zoom,
              lng,
              lat,
              tileZ: zoom,
            }),
          });
        });

        console.log(queryResult);

        // release tile
        renderRef.consumer.ctx = undefined;
        this.mapboxRenderer.releaseRender(renderRef);
        this.mapboxRenderer._style.sourceCaches?.origin?._tileCache.reset();
        return queryResult;
      });
    }
  }

  class PbfLayer extends mars3d.layer.BaseTileLayer {
    //构建ImageryProvider
    _createImageryProvider(options) {
      return createImageryProvider(options);
    }
  }

  function createImageryProvider(options) {
    if (options.url) {
      return Cesium.Resource.fetchJson(options).then((data) => {
        return new MVTImageryProvider({ ...options, style: data });
      });
    } else {
      return new MVTImageryProvider(options);
    }
  }

  PbfLayer.createImageryProvider = createImageryProvider;

  //注册下
  const layerType = "pbf"; //图层类型
  mars3d.LayerUtil.register(layerType, PbfLayer);
  mars3d.LayerUtil.registerImageryProvider(layerType, createImageryProvider);

  //对外接口
  window.mars3d.layer.PbfLayer = PbfLayer;
})(window);