// import 'createjs';
// import '../plugins/easeljs-0.8.2.min';
import '@/utils/plugins/easeljs-1.0.0.min';
import Stats from '@/utils/plugins/stats-2d';     //frame rate
import Stats3d from '@/utils/plugins/stats-3d.min';     //frame rate
import { gsap } from 'gsap'                        //动画插件
import utils from '@/utils/index.js'

class creater {
    constructor() {
        this.FPS = 60;
        window.createjs = createjs;
    }

    createStage(APP) {
        this.app = APP;
        let that = this;
        let stage = document.createElement('canvas');
        // stage.width  = 750;
        // stage.height = 1450;
        stage.id = 'stageCanvas';
        let container = document.getElementById('container');
        container.appendChild(stage);
        if (this.app.webGL) {
            this.stage = new createjs.StageGL(stage, { transparent: true, antialias: true });
            this.stage.setTextureParams = function (gl, isPOT) {
                if (this._antialias) {
                    //non POT linear works in some devices, but performance is NOT good, investigate
                    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
                    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
                } else {
                    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
                    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
                }
                gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
                gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
            };
            console.log('开启了webgl')
        } else {
            this.stage = new createjs.Stage(stage);
            console.log('未开启webgl,canvas2d模式')
        }
        this.setStage();

        //add stage frame rate stats
        // if (this.app.debug) {
        Stats.startFPS(this.stage, { x: 0, y: 200 }, this.app)
        // }

        // 3d stats
        if (this.app.debug) {
            this.stats = new Stats3d();
            container.appendChild(this.stats.domElement);
        }

        createjs.Ticker.timingMode = createjs.Ticker.RAF//TIMEOUT || RAF_SYNCHED || RAF
        createjs.Ticker.framerate = this.FPS;

        let count = 0;

        createjs.Ticker.on("tick", function handleTicker(event) {
            that.stage.update();
            that.app.FPS = Stats.FPS;
            // 3d states
            that.app.debug && that.stats.update();
            // count++;
            // if (count % 100 == 0) {
            //     console.log("Paused:", event.delta);
            // }
            if (APP.status == 2 && !APP.paused) APP.update()
            if (APP.needUpdate && APP.gameView) {
                APP.gameView.update();
            }
        });

        return this
    }

    //屏幕自适应 
    adaptScreen() {
        if (this.app.needAdaptScreen === false) return
        this.currentStageWidth = window.innerWidth;
        this.currentStageHeight = 1624 / 750 * window.innerWidth;
        this.currentWidthHeightScale = this.currentStageWidth / this.currentStageHeight;

        if (this.currentStageWidth > this.currentStageHeight) {
            if (this.initWidthHeightScale < this.currentWidthHeightScale)
                this.stageCanvas.scaleX = this.stageCanvas.scaleY = this.currentStageWidth / this.initStageWidth;
            else
                this.stageCanvas.scaleX = this.stageCanvas.scaleY = this.currentStageHeight / this.initStageHeight;
        }
        else {
            if (this.initWidthHeightScale < this.currentWidthHeightScale)
                this.stageCanvas.scaleX = this.stageCanvas.scaleY = this.currentStageWidth / this.initStageWidth;
            else
                this.stageCanvas.scaleX = this.stageCanvas.scaleY = this.currentStageHeight / this.initStageHeight;
        }
        this.stage.x = 0//(this.currentStageWidth - this.initStageWidth) * this.stageCanvas.scaleX / 2;
        this.stage.y = 0//(window.innerHeight - this.currentStageHeight) * this.stageCanvas.scaleY / 2;

        this.offsetTop = (window.innerHeight - this.currentStageHeight) * this.stageCanvas.scaleY;

        if (window.innerHeight < this.currentStageHeight)
            gsap.set(this.stageCanvas, { y: this.offsetTop });  //+ (window.deviceInfo.screenSize <= 2 ? 20 : 0)
        else
            gsap.set(this.stageCanvas, { y: 0 });

        // console.log(this.stageCanvas.scaleX,this.stageCanvas.scaleY,window.devicePixelRatio)
        // console.log(this.stageContainer.x,this.stageContainer.y,this.currentStageHeight,this.offsetTop)

        if (!this.ratio) {
            this.ratio = /*appPlugins.isAndriod() ? 1 :*/  2 //window.devicePixelRatio //appPlugins.getDevicePixelRatio(this.stageCanvas.getContext("3d"));
        }
        this.stageCanvas.width = this.currentStageWidth * this.ratio;
        this.stageCanvas.height = this.currentStageHeight * this.ratio;
        this.stageCanvas.style.width = this.currentStageWidth + "px";
        this.stageCanvas.style.height = this.currentStageHeight + "px";
        this.stage.scaleX = this.ratio * this.stageCanvas.scaleX;
        this.stage.scaleY = this.ratio * this.stageCanvas.scaleY;
        this.stageRenderWidth = 750;
        this.stageRenderHeight = this.currentStageHeight / this.currentStageWidth * this.stageRenderWidth;

        // console.log(this.stageRenderWidth,this.stageCanvas.height)

        if (this.app.webGL) {
            this.stage.updateViewport(this.stageCanvas.width, this.stageCanvas.height)
        }
        // this.stage.updateViewport(this.stageCanvas.width,this.stageCanvas.height)
        // 
        return (this.currentStageHeight - this.initStageHeight) * this.stageCanvas.scaleY / 2
    }

    setStage() {
        var initWidth = 750;
        var initHeight = 1624;

        this.stageCanvas = this.stage.canvas;
        this.stageCanvas.width = initHeight;
        this.stageCanvas.height = initHeight;
        this.initStageWidth = initWidth;
        this.initStageHeight = initHeight;
        this.initWidthHeightScale = initWidth / initHeight;


        // this.backgroundContainer  = new createjs.Container();//加载层
        this.loadingContainer = new createjs.Container();   //加载层
        this.mainContainer = new createjs.Container().set({ alpha: 0 });   //游戏层

        // this.mission_success_Container  = new createjs.Container().set({alpha:0});   //通关层
        // this.timeCount_Container  = new createjs.Container().set({alpha:0});         //timeCount层

        // this.resultContainer      = new createjs.Container();   //游戏结果页
        this.stageContainer = new createjs.Container();      //我的 最外层
        // this.panelContainer        = new createjs.Container().set({alpha:0});

        this.stageContainer.addChild(this.loadingContainer, this.mainContainer);

        this.stage.addChild(this.stageContainer);
        // this.app.webGL && this.stage.setClearColor("#051e56");

        createjs.Touch.enable(this.stage);
        // console.log(this.stage)
        this.stage.enableMouseOver(10);
        this.stage.mouseMoveOutside = true;

        this.adaptScreen();

        window.addEventListener("resize", (event) => {
            utils.sleep(300).then(() => {
                this.adaptScreen();
            })
        });
    }

}

module.exports = creater;