var canvas = document.getElementById("game-canvas");
var context = canvas.getContext("2d");

var backgroundColor = '#F5DEB3';
var gridColor = '#8B4513';
var boardSize = 19;

var border = canvas.width / 10;
var boardWidth = canvas.width - (border * 2);
var boardHeight = canvas.height - (border * 2);

var cellWidth = boardWidth / (boardSize - 1);
var cellHeight = boardHeight / (boardSize - 1);

var lastX;
var lastY;

/* state of pieces 
    0: empty
    1: white
    2: black
*/
var session = 0;
var playerStone;

var state = [];
for (var i = 0; i < boardSize; i++)
{
    state[i] = [];
    for (var j = 0; j < boardSize; j++)
    {
        state[i][j] = 0;
    }
}

// @connect
// Connect to the websocket
var socket;
const connect = function() {
    return new Promise((resolve, reject) => {
        const socketProtocol = (window.location.protocol === 'https:' ? 'wss:' : 'ws:')
        const port = window.location.port;
        const socketUrl = `${socketProtocol}//${window.location.hostname}:${port}/ws/`

        // Define socket
        socket = new WebSocket(socketUrl);

        socket.onopen = (e) => {
            // Resolve the promise - we are connected
            resolve();
        }

        socket.onmessage = (msg) => {
            // Any data from the server can be manipulated here.
            let parsed = JSON.parse(msg.data);
            switch (parsed.type) {
                case "board":
                    console.log("Setting board state");
                    parsed.data.forEach( function (move, index) {
                        state[move.x][move.y] = move.state;
                    });
                    drawGrid();
                    break;
                case "new":
                    for (var i = 0; i < boardSize; i++) {
                        for (var j = 0; j < boardSize; j++) {
                            state[i][j] = 0;
                        }
                    }
                    drawGrid();
                default:
                    console.log(msg);
            }
        }

        socket.onerror = (e) => {
            // Return an error if any occurs
            console.log(e);
            resolve();
            // Try to connect again
            connect();
        }
    });
}

// @isOpen
// check if a websocket is open
const isOpen = function(ws) {
    console.log(ws.readyState);
    return ws.readyState === ws.OPEN
}


// finish grid
function drawGrid()
{    
    
    /* draw board square */
    context.fillStyle = backgroundColor;
    context.fillRect(0, 0, canvas.width, canvas.height);
    
    /* draw board grid */
    context.fillStyle = gridColor;
    for (var i = 0; i < boardSize - 1; i++)
    {
        for (var j = 0; j < boardSize - 1; j++)
        {
            context.fillRect(
                i * cellWidth + border, 
                j * cellHeight + border, 
                cellWidth - 1, 
                cellHeight - 1
            );
        }
    }
    
    /* draw quarter marks and center mark on grid */
    var quarter = Math.floor((boardSize - 1) / 4);
    var markerSize = 8;
    var markerMargin = (markerSize / 2) + 0.5;
    
    context.fillStyle = backgroundColor;
    if (!!(boardSize % 2))
    {
        context.fillRect(
            (((boardSize - 1) / 2) * cellWidth) + border - markerMargin, 
            (((boardSize - 1) / 2) * cellWidth) + border - markerMargin,
            markerSize, 
            markerSize
        );
    }
    context.fillRect(
        (quarter * cellWidth) + border - markerMargin, 
        (quarter * cellWidth) + border - markerMargin, 
        markerSize, 
        markerSize
    );
    context.fillRect(
        (((boardSize - 1) - quarter) * cellWidth) + border - markerMargin, 
        (quarter * cellWidth) + border - markerMargin, 
        markerSize, 
        markerSize
    );
    context.fillRect(
        (((boardSize - 1) - quarter) * cellWidth) + border - markerMargin, 
        (((boardSize - 1) - quarter) * cellWidth) + border - markerMargin, 
        markerSize, 
        markerSize
    );
    context.fillRect(
        (quarter * cellWidth) + border - markerMargin,
        (((boardSize - 1) - quarter) * cellWidth) + border - markerMargin,
        markerSize, 
        markerSize
    );
    
    /* draw text labels for grid */
    var size = canvas.width / 40;
    var textSpacing = 10;
    context.fillStyle = '#000000';
    context.font = size + "px Arial";
    
    for (i = 0; i < boardSize; i++)
    {
        context.fillText(
            (i + 1), textSpacing, 
            ((canvas.height - border) - (i * cellHeight)) + (size / 3)
        );
        context.fillText(
            (i + 1), canvas.width - (size + textSpacing), 
            ((canvas.height - border) - (i * cellHeight)) + (size / 3)
        );

        context.fillText(
            (String.fromCharCode(97 + i)),
            (border + (i * cellHeight) + (size / 3)) - (size / 1.5), 
            textSpacing + size
        );
        context.fillText(
            (String.fromCharCode(97 + i)), 
            (border + (i * cellHeight) + (size / 3)) - (size / 1.5), 
            canvas.height - (textSpacing * 2)
        );
    }

    drawPieces();
}

function drawPieces() {
    /* draw pieces */
    for (var i = 0; i < boardSize; i++)
    {
        for (var j = 0; j < boardSize; j++)
        {
            switch(state[i][j]) {
                case 1:
                    placeStone(
                        (i * cellWidth) + border, 
                        (j * cellWidth) + border, 
                        'rgba(255, 255, 255, 1)'
                    );
                    break;
                case 2:
                    placeStone(
                        (i * cellWidth) + border, 
                        (j * cellWidth) + border, 
                        'rgba(0, 0, 0, 1)'
                    );
                    break;
                default:
            }
        }
    }
}

canvas.addEventListener('mousedown', function(evt) 
{
    try {
        // push state change to backend
        if(isOpen(socket)) {
            socket.send(JSON.stringify({
                "type":"move",
                "data": {
                    "session":session,
                    "x":lastX,
                    "y":lastY,
                    "state":state[lastX][lastY] > 0 ? 0 : playerStone
                }
            }));
        } else {
            console.log("Websocket is closed");
        }
    } catch(e) {
        console.log(e);
    }
});

canvas.addEventListener('mousemove', function(evt) 
{
    var position = getGridPoint(evt);

    if ((position.x != lastX) || (position.y != lastY))
    {
        drawGrid();
        if (
            ((position.x >=0) && (position.x < boardSize)) && 
            ((position.y >=0) && (position.y < boardSize))
        ) {
            placeStone(
                (position.x * cellWidth) + border, 
                (position.y * cellWidth) + border, 
                'rgba(0, 0, 0, 0.2)'
            );
        }
    }
    lastX = position.x;
    lastY = position.y;        
});

function placeStone(x, y, color)
{
    var radius = cellWidth / 2;
    
    context.beginPath();
    context.arc(x, y, radius, 0, 2 * Math.PI, false);
    context.fillStyle = color;    
    context.fill();
    context.lineWidth = 5;
}

function getGridPoint(evt)
{
    var rect = canvas.getBoundingClientRect();
        
    var x = Math.round(
        (evt.clientX-border-rect.left) / (rect.right-2*border-rect.left) * boardWidth
    );
    var y = Math.round(
        (evt.clientY-border-rect.top) / (rect.bottom-2*border-rect.top) * boardHeight
    );
    
    var roundX = Math.round(x / cellWidth);
    var roundY = Math.round(y / cellHeight);
    
    return {
        x: roundX,
        y: roundY
    };
}

// finish
document.getElementById("new").onclick = function () {
    // new game, new session, etc
    socket.send(JSON.stringify({
        "type":"new",
        "data": {
            "session":session
        }
    }));
};

const stones = document.getElementById("stones");
playerStone = stones.selectedIndex;
stones.onchange = function () {
    // let player pick stone type
    playerStone = stones.selectedIndex;
    console.log(`Player changed stone to ${playerStone}`);
};

connect();