import mermaid from "/static/js/mermaid/mermaid.esm.min.mjs";
mermaid.initialize({
    startOnLoad: false,
    theme: "base",
    useMaxWidth: true,
    securityLevel: "loose"
});

var charsheet_elements = {}
charsheet_elements["lbl_agility"] = document.getElementById("lbl-attr-agility");
charsheet_elements["lbl_instinct"] = document.getElementById("lbl-attr-instinct");
charsheet_elements["lbl_leadership"] = document.getElementById("lbl-attr-leadership");
charsheet_elements["lbl_instinct_txt"] = document.getElementById("lbl-attr-instinct-txt");
charsheet_elements["btn_upgrade_agility"] = document.getElementById("btn-upgrade-agility");
charsheet_elements["btn_upgrade_instinct"] = document.getElementById("btn-upgrade-instinct");
charsheet_elements["btn_upgrade_leadership"] = document.getElementById("btn-upgrade-leadership");
charsheet_elements["blk_tree"] = document.getElementById("charsheet-upgrade-tree");
charsheet_elements["blk_details"] = document.getElementById("charsheet-upgrade-details");
charsheet_elements["lbl_upgrade_name"] = document.getElementById("lbl-upgrade-name");
charsheet_elements["txt_upgrade_desc"] = document.getElementById("txt-upgrade-desc");
charsheet_elements["lst_upgrade_reqs"] = document.getElementById("lst-upgrade-requires");

function update_charsheet() {
    charsheet_elements["lbl_agility"].innerHTML = gamestate["agility"];
    charsheet_elements["lbl_instinct"].innerHTML = gamestate["instinct"];
    charsheet_elements["lbl_leadership"].innerHTML = gamestate["leadership"];

    if (gamestate["story_beat"] >= 3) {
        charsheet_elements["lbl_instinct_txt"].innerHTML = "Intelligence";
        charsheet_elements["btn_upgrade_instinct"].innerHTML = "Intelligence Upgrades";
    }
}

globalThis.purchase_upgrade = async function (tree, upgrade) {
    charsheet_elements["blk_details"].style.visibility = "visible";
    charsheet_elements["blk_details"].style.display = "flex";
    charsheet_elements["blk_tree"].style.visibility = "hidden";
    charsheet_elements["blk_tree"].style.display = "none";
    var upgrade_data = await fetch(`/upgrades/${tree}/${upgrade}`)
    .then(res => res.text())
    console.log(upgrade_data)
    var upgrade = JSON.parse(upgrade_data);

    charsheet_elements["lbl_upgrade_name"].innerHTML = upgrade["name"];
    charsheet_elements["txt_upgrade_desc"].innerHTML = upgrade["desc"];
    charsheet_elements["lst_upgrade_reqs"].innerHTML = "";

    if (upgrade["food"] > 0) {
        var foodli = document.createElement("li");
        foodli.innerHTML = `🍏 ${upgrade["food"]} food`;
        charsheet_elements["lst_upgrade_reqs"].appendChild(foodli);
    }
    if (upgrade["shinies"] > 0) {
        var shiniesli = document.createElement("li");
        shiniesli.innerHTML = `🪙 ${upgrade["shinies"]} shinies`;
        charsheet_elements["lst_upgrade_reqs"].appendChild(shiniesli);
    }
    if (upgrade["agility"] > 0) {
        var agilityli = document.createElement("li");
        agilityli.innerHTML = `An agility score of ${upgrade["agility"]}`;
        charsheet_elements["lst_upgrade_reqs"].appendChild(agilityli);
    }
    if (upgrade["instinct"] > 0) {
        var instinctli = document.createElement("li");
        instinctli.innerHTML = `An instinct score of ${upgrade["instinct"]}`;
        charsheet_elements["lst_upgrade_reqs"].appendChild(instinctli);
    }
    if (upgrade["leadership"] > 0) {
        var leadershipli = document.createElement("li");
        leadershipli.innerHTML = `A leadership score of ${upgrade["leadership"]}`;
        charsheet_elements["lst_upgrade_reqs"].appendChild(leadershipli);
    }

    for (item in upgrade["requires"]) {
        var itemli = document.createElement("li");
        itemli.innerHTML = `The upgrade ${item}`;
        charsheet_elements["lst_upgrade_reqs"].appendChild(itemli);
    }
}

async function display_tree(tree) {
    charsheet_elements["blk_details"].style.visibility = "hidden";
    charsheet_elements["blk_details"].style.display = "none";
    charsheet_elements["blk_tree"].style.visibility = "visible";
    charsheet_elements["blk_tree"].style.display = "flex";

    var upgrade_tree = await fetch(`/upgrades/${tree}`)
    .then(res => res.text())
    //console.log(upgrade_tree)
    var data_block = document.getElementById("upgrade-tree-data");
    data_block.removeAttribute("data-processed");

    //charsheet_elements["blk_tree"].innerHTML = upgrade_tree
    data_block.innerHTML = upgrade_tree;
    await mermaid.run({nodes: [data_block]})
}

charsheet_elements["btn_upgrade_agility"].addEventListener("click", (ev) => {display_tree("agility")});
charsheet_elements["btn_upgrade_instinct"].addEventListener("click", (ev) => {display_tree("instinct")});
charsheet_elements["btn_upgrade_leadership"].addEventListener("click", (ev) => {display_tree("leadership")});