class Demo extends Phaser.Scene {
    constructor() {
        super({
            key: 'examples'
        })
    }

    preload() { }

    create() {
        // create board
        var config = {
            grid: getHexagonGrid(this),
            // grid: getQuadGrid(this),
            width: 15,
            height: 15,
            // wrap: true
        }
        this.board = new Board(this, config);

        // add chess
        this.chessA = new ChessA(this.board);

        // add some blockers
        for (var i = 0; i < 20; i++) {
            new Blocker(this.board);
        }

        this.chessA.showMoveableArea();
    }
}

var getQuadGrid = function (scene) {
    var grid = scene.rexBoard.add.quadGrid({
        x: 400,
        y: 100,
        cellWidth: 100,
        cellHeight: 50,
        type: 1
    });
    return grid;
}

var getHexagonGrid = function (scene) {
    var staggeraxis = 'x';
    var staggerindex = 'odd';
    var grid = scene.rexBoard.add.hexagonGrid({
        x: 50,
        y: 50,
        size: 24,
        staggeraxis: staggeraxis,
        staggerindex: staggerindex
    })
    return grid;
};

class Board extends RexPlugins.Board.Board {
    constructor(scene, config) {
        // create board
        super(scene, config);
        // draw grid
        var graphics = scene.add.graphics({
            lineStyle: {
                width: 1,
                color: COLOR_PRIMARY,
                alpha: 1
            }
        });
        this.forEachTileXY(function (tileXY, board) {
            var points = board.getGridPoints(tileXY.x, tileXY.y, true);
            graphics.strokePoints(points, true);
        });
        // enable touch events
        this.setInteractive();
    }
}

class Blocker extends RexPlugins.Board.Shape {
    constructor(board, tileXY) {
        var scene = board.scene;
        if (tileXY === undefined) {
            tileXY = board.getRandomEmptyTileXY(0);
        }
        // Shape(board, tileX, tileY, tileZ, fillColor, fillAlpha, addToBoard)
        super(board, tileXY.x, tileXY.y, 0, COLOR_DARK);
        scene.add.existing(this);
    }
}

class ChessA extends RexPlugins.Board.Shape {
    constructor(board, tileXY) {
        var scene = board.scene;
        if (tileXY === undefined) {
            tileXY = board.getRandomEmptyTileXY(0);
        }
        // Shape(board, tileX, tileY, tileZ, fillColor, fillAlpha, addToBoard)
        super(board, tileXY.x, tileXY.y, 0, COLOR_LIGHT);
        scene.add.existing(this);
        this.setDepth(1);

        // add behaviors        
        this.moveTo = scene.rexBoard.add.moveTo(this, {speed: 200});
        this.pathFinder = scene.rexBoard.add.pathFinder(this, {
            cacheCost: false,
            costCallback: function (curTile, preTile, pathFinder) {
                var board = pathFinder.board;
                if (board.contains(curTile.x, curTile.y, 0)) {
                    return pathFinder.BLOCKER;
                }
                var cost = 1;
                var prePreTile = preTile.preNodes[0];
                if (prePreTile) {
                    var dirPreTileToCurTile = board.getNeighborTileDirection(preTile, curTile);
                    var dirPrePreTileToPreTile = board.getNeighborTileDirection(prePreTile, preTile);
                    if (dirPreTileToCurTile !== dirPrePreTileToPreTile) {
                        cost += 1;
                    }
                }
                return cost;
            }
        });

        // private members
        this._movingPoints = 5;
        this._markers = [];
    }

    showMoveableArea() {
        this.hideMoveableArea();
        var tileXYArray = this.pathFinder.findArea(this._movingPoints);
        for (var i = 0, cnt = tileXYArray.length; i < cnt; i++) {
            this._markers.push(
                new MoveableMarker(this, tileXYArray[i])
            );
        }
        return this;
    }

    hideMoveableArea() {
        for (var i = 0, cnt = this._markers.length; i < cnt; i++) {
            this._markers[i].destroy();
        }
        this._markers.length = 0;
        return this;
    }

    moveToTile(endTile) {
        if (this.moveTo.isRunning) {
            return false;
        }
        var tileXYArray = this.pathFinder.getPath(endTile.rexChess.tileXYZ);
        this.moveAlongPath(tileXYArray);
        return true;
    }

    moveAlongPath(path) {
        if (path.length === 0) {
            this.showMoveableArea();
            return;
        }

        this.moveTo.once('complete', function () {
            this.moveAlongPath(path);
        }, this);
        this.moveTo.moveTo(path.shift());
        return this;
    }
}

class MoveableMarker extends RexPlugins.Board.Shape {
    constructor(chess, tileXY) {
        var board = chess.rexChess.board;
        var scene = board.scene;
        // Shape(board, tileX, tileY, tileZ, fillColor, fillAlpha, addToBoard)
        super(board, tileXY.x, tileXY.y, -1, COLOR2_DARK);
        scene.add.existing(this);
        this.setScale(0.5);

        // on pointer down, move to this tile
        this.on('board.pointerdown', function () {
            if (!chess.moveToTile(this)) {
                return;
            }
            this.setFillStyle(COLOR2_LIGHT);
        }, this);
    }
}

const COLOR_PRIMARY = 0x43a047;
const COLOR_LIGHT = 0x76d275;
const COLOR_DARK = 0x00701a;

const COLOR2_PRIMARY = 0xd81b60;
const COLOR2_LIGHT = 0xff5c8d;
const COLOR2_DARK = 0xa00037;

var config = {
    type: Phaser.AUTO,
    parent: 'phaser-example',
    width: 800,
    height: 600,
    scale: {
        mode: Phaser.Scale.FIT,
        autoCenter: Phaser.Scale.CENTER_BOTH,
    },
    scene: Demo,
    plugins: {
          scene: [{
              key: 'rexBoard',
              plugin: rexboardplugin,
              mapping: 'rexBoard'
          }]
    }
};

var game = new Phaser.Game(config);