import { Feature } from 'ol';
import MVT from 'ol/format/MVT.js';
import Projection from 'ol/proj/Projection.js';
import {toContext} from 'ol/render';

import CanvasBuilderGroup from 'ol/render/canvas/BuilderGroup.js';
import CanvasExecutorGroup from 'ol/render/canvas/ExecutorGroup.js';
import {renderFeature} from 'ol/renderer/vector.js';

/**
 * 创建 mvt provider
 * @param {*} options 
 */
function MvtImageryProvider(options) {
    options = Cesium.defaultValue(options, Cesium.defaultValue.EMPTY_OBJECT)
    /**
     * 省略代码
     */
    this._pixelRatio = 1
    this._transform = [0.0625, 0, 0, 0.0625, 0, 0]
}
MvtImageryProvider.prototype.requestImage = function (x, y, level, request) {
    let that = this
    let url = this._url
    // 这里不知道为什么，如果直接写level的话，那么我的4326的坐标系，就无法获取正确的图层
    level=level+2

    let reverseY = this._tilingScheme.getNumberOfYTilesAtLevel(level)-y-1;
    // 拼接url
    url = url.replace("{x}", x).replace("{y}", y).replace("{reverseY}", reverseY).replace("{z}", level).replace("{k}", this._key)

    let resource = Cesium.Resource.createIfNeeded(url)
    return resource.fetchArrayBuffer().then((arrayBuffer) => {
        try {
            /**
             * 使用 CanvasbulderGroup 进行渲染
             */
            let canvas = document.createElement("canvas")
            canvas.width = 256
            canvas.height = 256
            let ctx = canvas.getContext("2d")


            var extent = [0, 0, 4096, 4096]
            let resolution = this._resolutions[level]
            const builderGroup = new CanvasBuilderGroup(0,extent,resolution,this._pixelRatio);

            let features = that._mvtParser.readFeatures(arrayBuffer)
            let styleConfig = that._styleConfig
            for (var i = 0; i < features.length; i++) {
                var feature = features[i]

                // 获取样式信息
                let properties = feature.getProperties()
                let featureLayer = properties.layer
                let styleFunc = styleConfig[featureLayer] ? styleConfig[featureLayer].styleFunc : ""
                
                // 渲染图层
                if(styleFunc){
                    let styles = styleFunc(features[i],resolution)
                    if(styles){
                        // 循环遍历渲染feature
                        for (let j = 0; j < styles.length; j++) {
                            renderFeature(builderGroup,feature,styles[j],16)
                        }
                    }
                }
            }
            const executorGroupInstructions=builderGroup.finish();
            const renderingReplayGroup = new CanvasExecutorGroup(extent,resolution,this._pixelRatio,null,executorGroupInstructions);
            renderingReplayGroup.execute(ctx,that._pixelRatio, that._transform,0,true);
            
            // 清空
            ctx = null 

            // 切片缓存队列渲染(有没有用，还待考察)
            canvas.xMvt = x
            canvas.yMvt = y
            canvas.zMvt = level
            that._tileQueue.markTileRendered(canvas)

            // 返回待渲染的 canvas
            return canvas
        } catch (error) {
            console.log(error)
        }
    })
}