const ip = "127.0.0.1";
const port = "35270";
$(function () {
    const init_board = [0, 2, 0, 0, 0, 0, -5, 0, -3, 0, 0, 0, 5, -5, 0, 0, 0, 3, 0, 5, 0, 0, 0, 0, -2, 0];
    var board = [];
    // var init_board = [0,2,0,-1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0]
    const red = "#E83D04";
    const white = "#E8E077";
    const brown = "#4C2E00";
    var prevBoard = [];
    var color = white;
    let quad = false;
    var roll = [Math.floor(Math.random() * 6) + 1, Math.floor(Math.random() * 6) + 1];
    // var roll = [1,3];
    var totalRoll = roll[0] + roll[1];
    if (roll[0] == roll[1]) {
        totalRoll = roll[0] * 4;
        roll = [roll[0], roll[0], roll[0], roll[0]];
        quad = true;
    }
    $("#roll").text("roll: " + roll.toString() + " total moves: " + totalRoll.toString());
    console.log("Initial roll:");
    console.log(roll);
    // Build pins
    for (var i = 0; i < 26; i++) {
        if (i < 13 && 0 < i) {
            var pos = 'bottom';
        }
        else if (i > 12 && i < 25) {
            var pos = 'top';
        }
        else {
            var pos = 'bar';
        }
        if (color == white) {
            color = red;
        }
        else {
            color = white;
        }
        if (i == 0 || i == 25) {
            color = brown;
        }
        var div = $("<div style='background-color:" + color + "'/>").addClass("pin").addClass("pin-" + pos).attr('id', 'pin-' + i);
        var checkers_div = $("<div />").addClass("checkers").attr('id', 'checkers-' + i);
        var checkers_list = $("<ul />").addClass("checkers_list").attr('id', 'checkers_list-' + i).attr('pinId', i);
        checkers_div.append(checkers_list);
        div.append(checkers_div);
        $("#pins").append(div);
    }
    var div = $("<div style='background-color:black'/>").addClass("pin").addClass("pin-26").attr('id', 'pin-26');
    var checkers_div = $("<div />").addClass("checkers").attr('id', 'checkers-26');
    var checkers_list = $("<ul />").addClass("checkers_list").attr('id', 'checkers_list-26').attr('pinId', 26);
    checkers_div.append(checkers_list);
    div.append(checkers_div);
    $("#pins").append(div);
    convertToPins(init_board);
    prevBoard = convertToBoard();
    $(".checkers_list").sortable({
        connectWith: ".checkers_list",
        receive: function (event, ui) {
            // Handle putting people on the bar correclty and getting off it.
            // Something like look at the index you drop the checker at
            var toIdx = event.target.attributes.pinId.value;
            var fromIdx = ui.sender.attr("pinId");
            // console.log(fromIdx);
            // console.log(toIdx);
            if (toIdx < 26) {
                var cloned_board = prevBoard.slice();
                var sign = Math.sign(cloned_board[fromIdx]);
                // if bar stuff has to be handled
                if (cloned_board[toIdx] * sign == -1) {
                    // Lift checker
                    cloned_board[fromIdx] += -(sign);
                    // Check where the opponents bar is
                    if (sign == -1) {
                        cloned_board[0] += -(sign);
                    }
                    else {
                        cloned_board[25] += -(sign);
                    }
                    // flip the piece at target index
                    cloned_board[toIdx] *= -1;
                    // Load the board into the pins
                    convertToPins(cloned_board);
                }
            }
            board = convertToBoard();
            // console.log("board!!!!");
            // console.log(board);
            var dataObject = handleMove(prevBoard, board, roll, totalRoll, quad);
            prevBoard = dataObject.board;
            // prevBoard = data_stuff['board'];
            roll = dataObject.roll;
            // roll = data_stuff['roll'];
            totalRoll = dataObject.totalRoll;
            // totalRoll = data_stuff['totalRoll'];
            convertToPins(prevBoard);
            console.log("total roll is:");
            console.log(totalRoll);
            if (totalRoll == 0) {
                if (board != convertToBoard()) {
                    let botResult = getBotMove(prevBoard);
                    prevBoard = botResult.board;
                    convertToPins(prevBoard);
                    roll = [Math.floor(Math.random() * 6) + 1, Math.floor(Math.random() * 6) + 1];
                    totalRoll = roll[0] + roll[1];
                    if (roll[0] == roll[1]) {
                        console.log("huehue");
                        totalRoll = roll[0] * 4;
                        roll = [roll[0], roll[0], roll[0], roll[0]];
                        quad = true;
                    }
                }
            }
            $("#roll").text("roll: " + roll.toString() + " total moves: " + totalRoll.toString());
        }
    });
});
function handleMove(prevBoard, board, roll, totalRoll, quad) {
    var data = postRequest(prevBoard, board, roll, totalRoll, quad);
    return data;
}
;
function convertToBoard() {
    let board = [];
    for (var i = 0; i < 26; i++) {
        var amount = $("#checkers_list-" + i).children('li').length;
        if (amount != 0) {
            var sign = parseInt(($("#checkers_list-" + i + "> li").attr('class').split(' ')[0]));
            if (i == 21) {
                // console.log(amount)
                // console.log(sign)
            }
            let checkers = sign * amount;
            board.push(checkers);
        }
        else {
            board.push(0);
        }
    }
    // console.log("The built board");
    // console.log(board);
    return board;
}
function emptyLists() {
    for (var i = 0; i < 27; i++) {
        $('#checkers_list-' + i).empty();
    }
}
function convertToPins(board) {
    // console.log(board);
    emptyLists();
    for (var i = 0; i < 26; i++) {
        var tmp = parseInt(board[i]);
        for (var amt_at_pin = 0; amt_at_pin < Math.abs(tmp); amt_at_pin++) {
            var sign = Math.sign(tmp);
            if (sign > 0) {
                var list_obj = $("<li><img src='black.png'  width='40'></li>").addClass(Math.sign(tmp).toString());
            }
            else if (sign < 0) {
                var list_obj = $("<li><img src='white.png'  width='40'></li>").addClass(Math.sign(tmp).toString());
            }
            $('#checkers_list-' + i).append(list_obj);
        }
    }
}
;
function getBotMove(board) {
    let data = { 'board': board.toString() };
    let result = { board: [] };
    $.ajax({
        type: "POST",
        async: false,
        url: "http://" + ip + ":" + port + "/bot_move",
        data: JSON.stringify(data),
        success: function (data) {
            data.split(",").forEach(function (item, index) {
                result.board.push(parseInt(item));
            });
        }
    });
    return result;
}
;
function postRequest(prevBoard, board, roll, totalRoll, quad) {
    let result = { board: [], totalRoll: 0, roll: [] };
    var data = { 'board': board.toString(), 'prevBoard': prevBoard.toString(), 'roll': roll.toString(),
        'totalRoll': totalRoll.toString(),
        'quad': quad.toString()
    };
    $.ajax({
        type: "POST",
        async: false,
        url: "http://" + ip + ":" + port + "/post_board",
        data: JSON.stringify(data),
        success: function (data) {
            let splitData = data.split("#");
            splitData[0].split(",").forEach(function (item, index) {
                result.board.push(parseInt(item));
            });
            result.totalRoll = parseInt(splitData[1]);
            splitData[2].split(",").forEach(function (item, index) {
                result.roll.push(parseInt(item));
            });
        }
    });
    return result;
}