import React from 'react';
import { observer } from 'mobx-react';
import store from "@/store/store.ts";

import styles from "./GamePage.module.less";
import { Application, Assets, Sprite, Ticker } from "pixi.js";
import { initBundle } from "@/core/pixi/Helper.ts";
import { Tween } from "@/core/tween";
import "@/core/pixi/base/mix.ts";

import { initDevtools } from '@pixi/devtools';
import { Button } from "@grace/ui";
import { PageCtrl } from "@/core/ctrls/PageCtrl.tsx";
import gameStore from "@/store/gameStore.ts";

import.meta.env.DEV && initDevtools({});

import { _throttle } from "@/utils/utils.ts";
import { GameEvent, globalEvent } from "@/pages/GamePage/GameEvent.ts";
import { LOG_KEY, pageView, sensorLog } from "@/utils/sensors";


import "./js/output";

declare const Game: any;

@observer
class GamePage extends React.Component<any, any> {

  gameCanvas: HTMLCanvasElement = null;
  gameDiv: HTMLDivElement = null;
  app: Application = null;
  game = null;

  async componentDidMount() {
// import { Game } from "./output.js" |  window[Game]
            //实例，传入资源路径
            // const game = this.game = new Game("./released/resource/")
            // https://yun.duiba.com.cn/db_games/RB_yanxue/250620/index.html
            const game = this.game = new Game("https://yun.duiba.com.cn/db_games/RB_yanxue/250620/resource/")
            //可预加载资源
            game.preLoad();
            //初始化舞台，及加载资源，传入canvas标签
            // <div id="cusEngine" style="line-height:0;font-size:0;position: absolute;">
            //     <canvas id="canvas" style="width: 100%;height: 100%"></canvas> //需要的canvas给个全屏，尽量用div包下
            // </div>
            await game.initStage(this.gameCanvas)
            //加鼠标事件，
            game.stage.addWebMouseEvent();
            //监听窗口尺寸改变
            window.addEventListener('resize', function () { game.stage.resize() });
            //展示游戏，传入数据
            game.showGame({
                targetStudy: 1,//背包数量
                targetTravel: 1,//飞机数量
                time: 120,//时间，秒计
            })
            //监听事件，比如游戏结果,gameResult|exitGame
            game.addGlobalEvent("gameResult", (e) => {
                console.log(e.data)//成功
                if (e.data === true) {
                    //成功
                } else {
                    console.log(e.data)
                    // {
                    //     targetStudy: 1,//还差合成数量
                    //     targetTravel: 2,
                    // }
                }
            })
            game.addGlobalEvent("exitGame", (e) => {
                //自行切换，游戏有需要就销毁
                game.destroy()
            })

            game.addGlobalEvent("pauseGame", (e) => {
                console.log(123123123)
            })

            
            //派发事件，比如倒计时暂停,pauseGame|continueGame|restartGame
            //暂停游戏
            // game.dispatchGlobalEvent("pauseGame")
            //继续游戏
            // game.dispatchGlobalEvent("continueGame")
            //重玩游戏
            game.dispatchGlobalEvent("restartGame", { targetStudy: 1, targetTravel: 1, time: 120 })

  }

  componentWillUnmount() {
    
  }


  render() {

    return <div className={styles.root} ref={(el) => this.gameDiv = el}>
      <canvas className={styles.gameCanvas} ref={(el) => this.gameCanvas = el}/>
    </div>;
  }
}

export default GamePage;
