var messages = document.getElementById('messages');
var form = document.getElementById('form');
var input = document.getElementById('input');
const server = new URLSearchParams(document.location.search).get('server') || 'https://elem.dervland.net/';

async function clickCommand(e) {
    let t = e.target;
    input.value = t.textContent;
}

async function clickLi(e) {
    let t = e.target;
    if (t.parentNode.classList.contains('command')) {
        return await clickCommand(e);
    }

    if (t.tagName.toLowerCase() != 'li') return;
    if (t.parentNode.tagName.toLowerCase() != 'li') return;
    if (!t.querySelector('img')) return;

    let content = t.textContent;
    if (content == '') return;

    let value = input.value;

    let noExtend = false;

    if (content.indexOf(' suggested ') != -1) {
        noExtend = true;
        content = content.slice(content.indexOf(' suggested ') + ' suggested '.length, content.length);
        content = content.slice(content.indexOf(';') + ';'.length, content.length);
    }

    if (content[0] == '/') {
        noExtend = true;
        content = content.replaceAll(/ \[[^\[]+\]/g,'');
    }

    console.log(content)

    let delimiter = ';';
    if (value[0] == '/') delimiter = ' ';
    if (value.indexOf(',') != -1) delimiter = ',';
    if (value.indexOf(';') != -1) delimiter = ';';
    if (value.indexOf('+') != -1) delimiter = '+';

    e.preventDefault();
    if (value == '' || noExtend) {
        input.value = `${content}`;
    } else {
        input.value = `${value}${delimiter}${content}`;
    }
}

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

    if (isNaN(counter[0] * 1)) {
        counter[0] = ['1'];
    }

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

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

    for (let lineI in lines) {
        let line = lines[lineI];

        var item = document.createElement('li');
        item.textContent = line;

        if (line[0] == '-' || line[0] == '<') {
            let img = new Image();
            if (line[0] == '<') {
                item.textContent = line.slice(3);
                img.src = `arrows/left.svg`;
            } else if (line[1] == '>') {
                item.textContent = line.slice(3);
                img.src = `arrows/cap.svg`;
            } else {
                item.textContent = line.slice(2);
                img.src = `arrows/right.svg`;
            }
            item.insertBefore(img, item.childNodes[0])
            item.style.fontStyle = 'italic';
        }
        wrap.appendChild(item);
        
        if (lineI == 0 && isUser) {
            wrap.classList.add('command');
        }

        item.title = 'Click to copy';
    }
    messages.appendChild(wrap);
    window.scrollTo(0, messages.offsetHeight);
}

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

    if (!input.value) return false;

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

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

    addMsg(input.value, true)
    addMsg(msg, false)

    if (input.value[0] != '/') {
        input.value = '';
    }

    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) });
document.querySelector('#messages').addEventListener('click', clickLi);

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

setTimeout(function () {
    input.value = '/help 1';
    goPage(0);
}, 500)

setTimeout(function () {
    input.value = '';
}, 1000)