const base_url = "https://oss110metz.rezo-rm.fr/"

var page = ['#main-page', '#admin-page', '#login-page', '#demande-page'];
window.onpopstate = history.onpushstate = function(e) {
    if (e.state) {
        show_page(e.state, true);
    } else {
        history.back();
    }
};
history.pushState("#main-page", "", "")

function show_page(id, historyPush) {
    for(i in page) {
        $(page[i]).hide();
    }
    $(id).show();
    if (!historyPush) {
        history.pushState(id, "", "")
    }
}

$("#login-button").click(function (e) {
    var data = JSON.stringify({
        user: $("#login").val(),
        password: $("#password").val()
    });
    $("#password").val('');
    $.ajax({
        type: "POST",
        url: base_url + "login",
        data: data,
        contentType: "application/json; charset=utf-8",
        dataType: "json",

        success: function (data) {
            if(data.success) {
                localStorage.setItem("token", data.token);
                localStorage.setItem("user", data.user);
                localStorage.setItem("isAdmin", data.isAdmin);
                show_page('#demande-page');
            } else {

            }

        }
    });

});

$("#prank-button").click(function () {
    if (localStorage.getItem('token')) {
        show_page('#demande-page');
    }
    else {
        show_page('#login-page');
    }
});

$("#logo").click(function () {
    if (localStorage.getItem('token')) {
        if (localStorage.getItem('isAdmin')) {
            show_page('#admin-page');
            // Load prank by default

        }
        else {
            show_page('#demande-page');
        }
    }
    else {
        show_page('#login-page');
    }
});

function get_admin(type) {
    $("#admin-content").innerHTML = "";
    $.ajax({
        type: "POST",
        url: base_url + "login",
        data: JSON.stringify({
            uid: localStorage.getItem('user'),
            token: localStorage.getItem('token'),
            type: type,
        }),
        contentType: "application/json; charset=utf-8",
        dataType: "json",

        success: function (data) {
            if(data.success) {
                switch (type) {
                    case: "prank":
                        let doneCnt = 0;
                        let prankData = [];
                        for (prankUid in data.prankData) {
                            data.prankData[prankUid].prankUid = prankUid;
                            prankData.push(data.prankData[prankUid]);
                        }
                        prankData.sort((a, b) => Date(a.date) - Date(b.date));
                        for (entry in prankData) {
                            switch (prankData[entry].type) {
                                case: "crêpe":
                                    if (prankData[entry].state == "pending"
                                    || prankData[entry].state == "accepted") {
                                        $("#admin-content").insertAdjacentHTML("beforeend", `
                                            <span id="${prankData[entry].prankUid}" class="prank">
                                                <div class="prank-title">Demande de crêpe par ${prankData[entry].creator}</div>
                                                <div class="prank-amount">Quantité: ${prankData[entry].amount}</div>
                                                <div class="prank-supplement">Garniture: ${prankData[entry].supplement}</div>
                                                <div class="prank-where">Livraison: ${prankData[entry].where}</div>
                                                <div class="prank-note">Livraison: ${prankData[entry].note}</div>
                                                <span class="prank-footer">
                                                    <div class="prank-uid">UID: ${prankData[entry].prankUid}</div>
                                                    <div class="prank-date">UID: ${prankData[entry].date}</div>
                                                </span>
                                                <span class="prank-btn">
                                                    <div class="prank-btn-accept">${(prankData[entry].state == "pending") ? "Accepter" : "Récupérer (accepté par: "+prankData[entry].manageBy+")"}</div>
                                                    <div class="prank-btn-refused">Refuser</div>
                                                    <div class="prank-btn-done">Done</div>
                                                </span>
                                            </span>
                                        `)
                                    } else if(prankData[entry].state == "done") {
                                        doneCnt++;
                                    }
                                    break;
                                case: "kidnap":
                                    // On garde ou pas ?
                                    break;
                            }
                        }
                        break;
                    case: "treasure":
                        break;
                    case: "activity":
                        break;
                }
            } else {
                alert(data.why);
            }

        }
    });
}

$(window).on("load", function() {

    /* Register the Service Worker */
    if ('serviceWorker' in navigator) {
        navigator.serviceWorker.register('./js/sw.js');
    }

    for(i in page) {
        $(page[i]).css('z-index', i);
    }

    /* load timer */
    window.setInterval(function() {
        var time = $("#timer").text();
        var t = time.split(":").map(t => parseInt(t));
        t[2] -= 1;
        if (t[2] < 0) {
            t[2] = 59;
            t[1] -= 1;
        }
        if (t[1] < 0) {
            t[1] = 59;
            t[0] -= 1;
        }
        if (t[0] < 0) {
            t[0] = 0;
            t[1] = 0;
            t[2] = 0;
        }
        $("#timer").text((new Date('December 17, 1995 ' + t.join(':'))).toLocaleTimeString('default', {
            hour: '2-digit',
            minute: '2-digit',
            second: '2-digit'
        }));
    }, 1000);
});