const pretext = "root@baipyr.us:~# ";
let startPosition = 0;
let cursorPosition = 0;
let cursorYOffset = 0;

const tbDiv = document.getElementById("textbox");
tbDiv.innerHTML = pretext+tbDiv.innerHTML;
const length = tbDiv.innerText.length+1;
startPosition = length;
cursorPosition = length;
const cursor = document.getElementById("cursor");
const textIn = document.getElementById("input");

cursor.oninput = () => {
    textIn.textContent += cursor.value;
    cursor.value = "";
    cursorPosition++;
};
cursor.focus();

document.addEventListener("selectionchange", e => {
    if (e.target !== cursor) {
        const selection = window.getSelection();
        if (selection.type === "Caret")
            cursor.focus();
        console.log(selection);
    }
});

document.addEventListener("keydown", e => {
    const index = cursorPosition - startPosition;
    const text = textIn.textContent;
    switch (e.key) {
        case "Backspace":
            // Ein Zeichen nach links löschen
            if (index === 0)
                return;
            if (index <= textIn.textContent.length-1) {
                const a = text.substring(0, index-1);
                const b = text.substring(index, text.length);
                textIn.textContent=a+b;
            } else
                textIn.textContent = text.substring(0,text.length-1);
            cursorPosition--;
            break;
        case "ArrowLeft":
            // Ein Zeichen nach links
            if (cursorPosition > startPosition)
                cursorPosition--;
            break;
        case "ArrowRight":
            // Ein Zeichen nach reckts
            if (index < textIn.textContent.length)
                cursorPosition++;
            break;
        case "Delete":
            // Ein Zeichen nach rechts löschen
            if (index === 0 || index >= textIn.textContent.length)
                return;
            const a = text.substring(0, index);
            const b = text.substring(index+1, text.length);
            textIn.textContent=a+b;
            break;
        case "Enter":
            // Befehl absenden / Zeilenumbruch
            const cursor = document.getElementById("cursor");
            tbDiv.removeChild(cursor);
            tbDiv.removeChild(textIn);

            // Run command and return output???
            let commandOutput = "";

            const aTag = str => `<a style="color: lightgrey;">${str}</a>`;
            if (commandOutput !== "") {
                commandOutput = `${aTag(commandOutput)}<br>`;
                cursorYOffset++;
            }
            tbDiv.innerHTML += `${aTag(text)}<br>${commandOutput}${pretext}`;
            textIn.textContent = "";
            tbDiv.appendChild(textIn);
            tbDiv.appendChild(cursor);
            cursorPosition = startPosition;
            cursorYOffset++;
            break;
        case "ArrowUp":
            // Einen Befehl zurück in der History
            break;
        case "ArrowDown":
            // Einen Befehl nach vorne in der History
            break;
        case "Tab":
            // Autocomplete
            break;
    }
});

setInterval(()=>{
    cursor.style.opacity = !parseInt(cursor.style.opacity)+0;
},1000);