var text = document.getElementById("msg").innerText
msg = JSON.parse(text)

function onDrag (evt) {
    var item = evt.item;  // dragged HTMLElement
    fromplayer = evt.from.getAttribute("inventory")
    toplayer = evt.to.getAttribute("inventory")
    itemid = item.getAttribute("itemid")
    toslot = evt.newIndex
    fromslot = evt.oldIndex
    data = {
        "fromplayer": fromplayer,
        "toplayer": toplayer,
        "itemid": itemid,
        "fromslot": fromslot,
        "toslot": toslot,
    }
    fetch('api/move_item', {
        method: 'POST',
        body: JSON.stringify(data),
    });
}
function draw_item(item) {
    const itemdiv = document.createElement('itemdiv');
    var name = item["name"]
    var description = item["description"]
    var image = item["image"] || "../static/empty.jpg"

    namespan = document.createElement('b');
    namespan.innerText = name;
    namespan.style.display = "block"
    namespan.style.textAlign = "center"

    descriptionspan = document.createElement('span');
    descriptionspan.innerText = description;
    descriptionspan.style.display = "block"
    descriptionspan.style.width = "8rem";

    imageimg = document.createElement('img');
    imageimg.src = image;
    imageimg.style.width = "8rem";
    imageimg.style.display = "block"

    itemdiv.appendChild(namespan);
    itemdiv.appendChild(imageimg);
    itemdiv.appendChild(descriptionspan);
    itemdiv.style.display = "inline-block"
    itemdiv.style.background = "lightcoral"
    itemdiv.setAttribute("itemid", item["id"]);
    return itemdiv
}

document.getElementById("btn-leave-session").onclick = async (e) => await fetch('api/leave_session', {
                    method: 'POST', body: JSON.stringify({})
                });
var session = msg.session;
document.getElementById("session").innerText = session["name"];
document.getElementById('label-username').innerText = msg.username;

document.getElementById("btn-gen-item").onclick = async (e) => {
    name = document.getElementById("input-gen-item-name").value;
    description = document.getElementById("input-gen-item-description").value;
    image = document.getElementById("input-gen-item-image").value;
    if (Boolean(name)) {
        await fetch('api/create_item', { method: 'POST', body: JSON.stringify(
            {'name': name, 'description': description, 'image': image}
        )});
    }
};
var wrapper = document.getElementById("items");
var items = msg.items;
var itemsdiv = document.createElement('div');
var itemsheading = document.createElement('h3');
itemsheading.innerText = "All Items";
wrapper.style.background = "lightblue";
wrapper.style.display = "table";

while (wrapper.children.length) wrapper.lastChild.remove();

Object.keys(items).forEach( item => {

    var item = items[item];
    itemdiv = draw_item(item);
    itemsdiv.appendChild(itemdiv);
    
});
Sortable.create(itemsdiv, 
    {
        "group": "items",
        "sort": "false",
        "draggable": "itemdiv",
        "onEnd": onDrag,

});
itemsdiv.setAttribute("inventory", "master");
wrapper.appendChild(itemsheading);
wrapper.appendChild(itemsdiv);


var inventories = document.getElementById("inventories");
while (inventories.children.length) inventories.lastChild.remove();

Object.keys(msg.inventories).forEach( name => {
    inventory = msg.inventories[name];
    inventorydiv = document.createElement('div');
    inventorydiv.style.display = "block";
    titlespan = document.createElement('h4');
    titlespan.innerText = name;
    titlespan.style.textAlign = "center";
    inventorydiv.appendChild(titlespan);

    Object.keys(inventory).forEach( item => {
        item = inventory[item];
        var thediv = draw_item(item);
        //thediv.style.display = "block";
        inventorydiv.appendChild(thediv);
        inventorydiv.style.display = "inline-block";
    });

    inventorydiv.style.background = "lightgreen";
    
    Sortable.create(inventorydiv, 
    {
        "group": "items",
        "sort": "false",
        "draggable": "itemdiv",
        "onEnd": onDrag,
    });
    inventorydiv.setAttribute("inventory", name);

    inventories.appendChild(inventorydiv);
    
});

inventories.style.display = "inline-block";