var messages = document.getElementById('messages');
var form = document.getElementById('form');
var input = document.getElementById('input');

async function goPage(count) {
    let counter = input.value.match(/[^\s]+$/g);
    if (!counter) return false;

    input.value = `${input.value.match(/^[^\s]+/g)[0]} ${counter[0] * 1 + count}`;
    main(new Event('placeholder'));
    return false;
}

async function addMsg(msg) {
    let lines = msg.split('\n');
    var wrap = document.createElement('li');

    for (let line of lines) {
        var item = document.createElement('li');
        item.textContent = line;

        if (line.startsWith('-') || line.startsWith('<')) {
            let img = new Image();
            if (line.startsWith('<') || line[2] == '>') {
                item.textContent = line.slice(3);
                img.src = `arrows/left.svg`;
            } else {
                item.textContent = line.slice(2);
                img.src = `arrows/right.svg`;
            }
            item.insertBefore(img, item.childNodes[0])
        }
        wrap.appendChild(item);
    }
    messages.appendChild(wrap);
    window.scrollTo(0, messages.offsetHeight);
}

async function main(e) {
    e.preventDefault();

    if (!input.value) return false;

    let msg = await fetch("https://elem.dervland.net/" /*"/"*/, {
        "method": "POST",
        "headers": {
            "content-type": "application/json",
        },
        "body": JSON.stringify({ "data": input.value })
    })

    msg = await msg.text();
    msg = msg.trim();

    addMsg(input.value)
    addMsg(msg)

    return false;
}

form.addEventListener('submit', main);

document.querySelector('.send').addEventListener('click', main);
document.querySelector('.prev').addEventListener('click', (e) => { e.preventDefault(); return goPage(1) });
document.querySelector('.next').addEventListener('click', (e) => { e.preventDefault(); return goPage(-1) });

input.value = '/inv 1';
goPage(0);