const gridWidth = 72
const gridHeight = 72
const gridsInX = 14
const gridsInY = 10
class Map extends egret.Sprite {
  private grids:any = []
  private touchArea: egret.Bitmap 
  public isShowingTouchArea
  private runnerMap:any = {} 
  private runnerList:any = []
  private catchedTip: egret.Bitmap = new egret.Bitmap()
  public constructor() {
    super();
    this.init()
  }

  // 初始化(给开始按钮绑定点击事件)
  private init() {
    for (let i = 0; i < gridsInY; i++) {
      this.grids.push([])
      for (let j = 0; j < gridsInX; j++) {
        const grid = new MapGrid()
        grid.x = j * gridWidth
        grid.y = i * gridHeight
        this.grids[i].push(grid)
        this.addChild(grid)
      }
    }
    
    this.touchArea = new egret.Bitmap()
    this.touchArea.texture = RES.getRes('mask_jpg')
    this.touchArea.alpha = 0

    this.addChild(this.touchArea)
    Store.getState().runners.forEach(runnerData => {
      const runner = new Runner(runnerData)
      if (Store.isCatcher()) {
        runner.alpha = 0
      }
      this.addChild(runner)
      this.runnerMap[runnerData.t_cid] = runner
    })
    EventBus.addEventListener('moving', (payload) => {
      this.runnerMap[payload.target.payload.t_cid].x = payload.target.payload.x * gridWidth
      this.runnerMap[payload.target.payload.t_cid].y = payload.target.payload.y * gridHeight
    })
    EventBus.addEventListener('clicking', (payload) => {
      const x = payload.target.payload.x * gridWidth
      const y = payload.target.payload.y * gridHeight
      if (Store.isCatcher()) {
        this.showSurroundedGrids(x, y) 
      } else {
        this.showClickedGrid(x, y)
      }
    })

    this.catchedTip.texture = RES.getRes('catched_jpg')
    this.catchedTip.alpha = 0
    this.addChild(this.catchedTip)
  }

  public getSurroundedGrids(x, y) {
    const left = x / gridWidth - 2
    const top = y / gridHeight - 2
    const grids = []
    for (let i = left; i < 5 + left; i++) {
      for (let j = top; j < 5 + top; j++) {
        if (i >= 0 && j >= 0 && i < gridsInX && j < gridsInY) {
          grids.push(this.grids[j][i])
        }
      }
    }
    return grids
  }

  public showClickedGrid(x, y) {
    const surroundedGrids = this.getSurroundedGrids(x, y)

    const clickedGrid = surroundedGrids.find(grid => grid.x === x && grid.y === y)
    clickedGrid.bg.texture = RES.getRes('grid_select_jpg')
    setTimeout(() => {
      clickedGrid.bg.texture = RES.getRes('grid_jpg')
    }, 1000); 
  }

  public getCatchedRunners(x, y) {
    const catchedRunners = []
    Store.getState().runners.forEach(runner => {
      const runnerInMap = this.runnerMap[runner.t_cid]
      if (runnerInMap.x === x && runnerInMap.y === y) {
        catchedRunners.push(runner)  
      } 
    })
    return catchedRunners
  }

  public showSurroundedGrids(x, y) {
    this.isShowingTouchArea = true
    const surroundedGrids = this.getSurroundedGrids(x, y)
    const centerGrid = surroundedGrids.find(grid => grid.x === x && grid.y === y)
    centerGrid.bg.texture = RES.getRes('grid_select_jpg')
    const runners = Store.getState().runners
    
    this.touchArea.alpha = 1
    this.touchArea.x = x - 2 * gridWidth
    this.touchArea.y = y - 2 * gridHeight
    surroundedGrids.forEach(grid => {
      grid.alpha = 1
    })
    // const twTouchArea = egret.Tween.get( this.touchArea );
    // twTouchArea.to( {alpha: 1}, 300 ).call(function() {
    //   surroundedGrids.forEach(grid => {
    //     grid.alpha = 1
    //   })
    //   // egret.Tween.get(grid).to({ alpha: 1 }, 300)
    // })
    // surroundedGrids.forEach(grid => {
    //   egret.Tween.get(grid).to({ alpha: 1 }, 300)
    // })
    runners.forEach(runner => {
      const runnerInMap = this.runnerMap[runner.t_cid]
      if (this.touchArea.hitTestPoint(runnerInMap.x, runnerInMap.y)) {
        runnerInMap.alpha = 1
      }
    })
    const catchedRunners = this.getCatchedRunners(x, y)
    catchedRunners.forEach(runner => {
      
      platform.sendSocketMessage({
          data: JSON.stringify({
              type: 'catch',
              room_id: 'default_room',
              cid: Store.getState().cid,
              payload: {
                  mark: runner.mark,
                  x: x / gridWidth,
                  y: y / gridHeight,
                  t_cid: runner.t_cid
              }
          }),
      })
      if (Store.isMe(runner.t_cid) || Store.isCatcher()) {
        SoundManager.getInstance().playCatched()
        const tween = egret.Tween.get(this.catchedTip);
        tween.to({alpha: 1}, 300).wait(500).to({alpha: 0}, 300)
      }
      
      if (Store.isCatcher()) {
        this.runnerMap[runner.t_cid].alpha = 0
      }
    })

    setTimeout(() => {
      centerGrid.bg.texture = RES.getRes('grid_jpg')
      surroundedGrids.forEach(grid => {
        grid.alpha = 0
      })
      runners.forEach(runner => {
        this.runnerMap[runner.t_cid].alpha = 0
      })
      this.touchArea.alpha = 0
      this.isShowingTouchArea = false
    }, 1000);
  }

  public release() {
  }
}
