const output = document.getElementById("output");
const input = document.getElementById("command");
const send = document.getElementById("send");

const protocol = location.protocol === "https:" ? "wss" : "ws";
const socket = new WebSocket(`${protocol}://${location.host}/ws`);

socket.onmessage = (event) => {
    output.textContent += event.data;
    output.scrollTop = output.scrollHeight;
};

socket.onclose = () => {
    output.textContent += "\n[Disconnected]\n";
};

send.onclick = sendCommand;

input.addEventListener("keydown", (e) => {

    if (e.key === "Enter" && !e.shiftKey) {
        e.preventDefault();
        sendCommand();
    }

});

function sendCommand() {

    const cmd = input.value;

    if (!cmd.trim()) return;

    socket.send(cmd);

    input.value = "";
    autoResize();
}

function autoResize() {

    input.style.height = "auto";
    input.style.height = input.scrollHeight + "px";

}

input.addEventListener("input", autoResize);

document.querySelectorAll("#hardkeys button").forEach(btn => {

    btn.onclick = () => {

        socket.send(`__KEY__:${btn.dataset.key}`);

        input.focus();

    };

});