const ver_numeric = 0;
const ver_string = "pre alpha";

const sleep = ms => new Promise(r => setTimeout(r, ms)); // sleep(int ms)

var page_elements = {};

var gamestate = {};
var ticks_since_last_save = 0;

const gamestate_default = {
    "statever": "1",
    "tick": 1,
    "name": "Nameless",
    "level": 1,
    "shinies": 0,
    "colony": 1,
    "food": 0,
    "autosave": 35,
    "story_beat": 0,
    "xp": 0,
    "xp_next": 50
};

var bool_log_alt = false
function record_log(text) {
    const div_logrow = document.createElement("div");
    if (bool_log_alt) { div_logrow.className = "log-line"; }
    else { div_logrow.className = "log-line-alt"; }
    bool_log_alt = !bool_log_alt;

    const div_logtick = document.createElement("div");
    div_logtick.className = "log-tick"
    div_logtick.innerHTML = "Day " + gamestate["tick"];
    div_logrow.append(div_logtick);

    const div_logmsg = document.createElement("div");
    div_logmsg.innerHTML = text;
    div_logmsg.className = "log-msg";
    div_logrow.append(div_logmsg);

    page_elements["div_log"].append(div_logrow);
}

function update_ui() {
    page_elements["lbl_name"].innerHTML = gamestate["name"];
    page_elements["lbl_tick"].innerHTML = gamestate["tick"];
    page_elements["lbl_colony"].innerHTML = gamestate["colony"];
    page_elements["lbl_shinies"].innerHTML = gamestate["shinies"];
    page_elements["lbl_food"].innerHTML = gamestate["food"];
}

var dev_toolbox_open = false;
function dev_toolbox(open) {
    if (open != dev_toolbox_open) {
        if (open) {
            var div_toolbox = document.createElement("div");
            page_elements["div_toolbox"] = div_toolbox;
            div_toolbox.setAttribute("id", "dev_toolbox");
            fetch("/dev/get-toolbox")
            .then((response) => response.text())
            .then((resp) => {div_toolbox.innerHTML = resp})
            page_elements["div_sidebar"].appendChild(div_toolbox);
        }
        else {
            var div_toolbox = page_elements["div_toolbox"];
            page_elements["div_sidebar"].removeChild(div_toolbox);
            div_toolbox.remove()
            delete page_elements["div_toolbox"];
        }
    }

    dev_toolbox_open = open;
}

async function game_tick() {
    gamestate["tick"] += 1;
    ticks_since_last_save += 1;
    page_elements["lbl_tick"].innerHTML = gamestate["tick"];
    var tickdata = await fetch("/tick")
    .then(res => {
        json = res.json()
        console.log(json)
        return json
    })
    .catch(e => { throw e; });
    console.log(JSON.stringify(tickdata));

    if (tickdata["code"] != 200) {
        console.error("Non-200 tick code: " + tickdata["code"]);
        return;
    }

    if (tickdata["event_type"] == 0) {
        // pass
    } else if (tickdata["event_type"] == 1) {
        // Flavor event - no gameplay effect, but occasionally says something fun.
        record_log(tickdata["log"]);
    } else if (tickdata["event_type"] == 10) {
        // Human encounter. This is a stub.
        record_log("You have encountered a human.");
    } 

    // sanity check
    if (!("autosave" in gamestate)) {
        gamestate["autosave"] = 35;
    }
    if (ticks_since_last_save % gamestate["autosave"] == 0 && ticks_since_last_save != 0) {
        save_game();
        ticks_since_last_save = 0;
    }

    update_ui();
}

var start_event = "";
var target = null;
if (desktop_mode) {
    // pywebview's native JS is nerfed in a few places and needs the additional python API
    // which gets loaded after initial DOM via injections
    start_event = "pywebviewready";
    target = window;
}
else {
    // in web mode, browsers are expected to have working local storage
    start_event = "DOMContentLoaded";
    target = document;
}


target.addEventListener(start_event, function (ev) {
    page_elements["div_log"] = document.querySelector("#main-log");
    page_elements["div_sidebar"] = document.querySelector("#main-sidebar");
    page_elements["div_name"] = document.querySelector("#side-seagull-name");
    page_elements["div_name_editor"] = document.querySelector("#side-seagull-name-editor");
    page_elements["lbl_name"] = document.querySelector("#lbl-seagull-name");
    page_elements["lbl_colony"] = document.querySelector("#lbl-seagull-colony");
    page_elements["lbl_shinies"] = document.querySelector("#lbl-seagull-shinies");
    page_elements["lbl_food"] = document.querySelector("#lbl-seagull-food");
    page_elements["edt_name"] = document.querySelector("#edt-seagull-name");
    page_elements["lbl_tick"] = document.querySelector("#main-day-counter");
    page_elements["lbl_xp"] = document.querySelector("#lbl-seagull-xp-current");
    page_elements["lbl_xp_next"] = document.querySelector("#lbl-seagull-xp-next");

    prepare_gamestate().then(update_ui());

    record_log("seagull game ver. " + ver_string);

    const interval = setInterval(() => {
        if (tick_meter_running) { game_tick(); }
    }, 1200);
});

function change_seagull_name() {
    page_elements["div_name"].style.display = "none";
    page_elements["div_name_editor"].style.display = "block";
}

function confirm_seagull_name() {
    const new_name = page_elements["edt_name"].value;
    page_elements["lbl_name"].innerHTML = new_name;
    gamestate["name"] = new_name;
    save_game();

    page_elements["div_name"].style.display = "block";
    page_elements["div_name_editor"].style.display = "none";
}

function cancel_seagull_name() {
    page_elements["edt_name"].value = "";

    page_elements["div_name"].style.display = "block";
    page_elements["div_name_editor"].style.display = "none";
}