//the program cannot operate correctly because the canvas does not respond with the changed status of the player
//this means that when you fire 3 bullets and click save, there is no way to transfer the current state of the player
//because in canvas you only fill the text ->
function attachEvents() {
    const appId = 'kid_Sk5kEu3bx/west/';
    const username = 'guest';
    const password = 'pass';
    const base64Auth = btoa(`${username}:${password}`);
    const authorizationHeader = {Authorization: `Basic ${base64Auth}`};
    const apiUrl = `https://baas.kinvey.com/appdata/`;

    $(document).ready(function () {
        $("#addPlayer").on('click', addPlayer);

        loadPlayers();
    });

    function addPlayer() {
        let name = $("#addName").val();
        $.post({
            method: "POST",
            url: apiUrl + appId,
            data: {
                name: name,
                money: 500,
                bullets: 6
            },
            headers: authorizationHeader
        }).then(loadPlayers).catch(printError)
    }

    function modifyPlayer(data) {
        let money = Number(data.data.money);
        let name = data.data.name;
        let id = data.data._id;
        let currBullets = Number(data.data.bullets);

        if (data.data.reload == true) {
            money -= 60;
            currBullets = 6;
        }
        $('div[data-ID="' + id + '"] .name').text(name);
        $('div[data-ID="' + id + '"] .money').text(money);
        $('div[data-ID="' + id + '"] .bullets').text(currBullets);
        let currplayer = {
            name: name,
            money: money,
            bullets: currBullets
        }

        reloadCanvas(currplayer);
        if (id) {
            $.ajax({
                method: "PUT",
                url: apiUrl + appId + `${id}`,
                data: {
                    name: name,
                    bullets: currBullets,
                    money: money
                },
                headers: authorizationHeader
            }).then(loadPlayers).catch(printError)
        }
    }

    function saveGame(data) {
        modifyPlayer(data);
        $("#canvas").hide();
        $("#save").hide();
        $("#reload").hide();

        let canvas = document.getElementById("canvas");
        clearInterval(canvas.intervalId);
    }

    function reloadCanvas(player) {
        let canvas = document.getElementById("canvas");
        clearInterval(canvas.intervalId);
        loadCanvas(player);
    }

    function loadPlayers() {
        $.ajax({
            method: "GET",
            url: apiUrl + appId,
            headers: authorizationHeader
        }).then(displayPlayers).catch(printError)
    }

    function displayPlayers(playerData) {
        $("#players").empty();
        for (let player of playerData) {
            let playerDiv = $("<div>").addClass("player").attr("data-id", `${player._id}`);

            playerDiv.append(
                $("<div>").addClass("row")
                    .append($("<label>").text("Name:"))
                    .append($("<label>").addClass("name").text(player.name))
            )
                .append(
                    $("<div>").addClass("row")
                        .append($("<label>").text("Money:"))
                        .append($("<label>").addClass("money").text(player.money))
                )
                .append(
                    $("<div>").addClass("row")
                        .append($("<label>").text("Bullets:"))
                        .append($("<label>").addClass("bullets").text(player.bullets))
                )
                .append($("<button>").addClass("play").text("Play").on('click', {
                    _id: player._id,
                    name: player.name,
                    money: Number(player.money),
                    bullets: Number(player.bullets)
                }, playGame))
                .append($("<button>").addClass("delete").text("Delete").on('click', {_id: player._id}, deletePlayer));
            $("#players").append(playerDiv);
        }
    }

    function playGame(data) {
        saveGame(data);
        $("#canvas").show();
        $("#save").show();
        $("#reload").show();

        let money = Number(data.data.money);
        let name = data.data.name;
        let id = data.data._id;
        let currBullets = Number(data.data.bullets);

        let player = {
            name: name,
            money: money,
            bullets: currBullets
        };

        $("#reload").on('click', {
            money: money,
            name: name,
            bullets: currBullets,
            _id: id,
            reload: true
        }, modifyPlayer);

        //here is the problem with saving the game for the money
        $("#save").on('click', {
            money: money,
            name: name,
            bullets: currBullets,
            _id: id,
            reload: false
        }, saveGame);

        loadCanvas(player);
    }

    function deletePlayer(data) {
        $.ajax({
            method: "DELETE",
            url: apiUrl + appId + `${data.data._id}`,
            headers: authorizationHeader
        }).then(loadPlayers).catch(printError)
    }

    function printError(error) {
        console.log(error);
    }
}