let got_keys = false;

function get_keys() {
    console.log("get_keys running ,  got_keys = ", got_keys);
    let username = document.getElementById("user").value;
    let password = document.getElementById("pass").value;
    let request = {auth: {user: username, pass: password}};

    fetch('http://127.0.0.1:8087/ldap/ssh', {
        // can switch this to get with auth headers i think
        method: 'POST',
        body: JSON.stringify(request),
        mode: 'cors',
    }).then(res => {
        if (res.status === 200) {
            return res.json();
        } else {
            document.getElementById('formStatus').innerHTML = "<span style='background-color: red; color: white'>Failed to fetch</span>";
        }
    }).then(data => {
        if (data.result === "success") {
            document.getElementById('formStatus').innerHTML = "<span style='background-color: green; color: white'>Success : Got keys</span>";
            let keys = data.success;
            document.getElementById('key_table').style.display = "table";
            got_keys = true;
            keys.forEach(key => {
                add_to_table(key);
            })
        } else {
            document.getElementById('formStatus').innerHTML = "<span style='background-color: red; color: white'>Failed to get keys</span>";
        }
    }).catch(err => {
        console.log(err);
    });
}

function add_key() {
    let username = document.getElementById("user").value;
    let password = document.getElementById("pass").value;
    let key = document.getElementById("key_input").value;
    let request = {auth: {user: username, pass: password}, key: key};
    if (key === "") {
        document.getElementById('formStatus').innerHTML = "<span style='background-color: red; color: white'>Key cannot be empty</span>";
        return;
    }
    fetch('http://127.0.0.1:8087/ldap/ssh/add', {
        method: 'POST',
        body: JSON.stringify(request),
        mode: 'cors',
    }).then(res => {
        if (res.status === 200) {
            return res.json();
        } else {
            document.getElementById('formStatus').innerHTML = "<span style='background-color: red; color: white'>Failed to fetch</span>";
        }

    }).then(data => {
        if (data.result === "success") {
            document.getElementById('formStatus').innerHTML = "<span style='background-color: green; color: white'>Success : Key added</span>";
            document.getElementById('key_table').style.display = "table";
            add_to_table(key);
        } else {
            document.getElementById('formStatus').innerHTML = "<span style='background-color: red; color: white'>Failed to add</span>";
        }
    }).catch(err => {
        document.getElementById('formStatus').innerHTML = "<span style='background-color: red; color: white'>Error </span>";
        console.log(err);
    });
}

function delete_key(row_idx) {
    let table = document.getElementById("key_table");
    let key = table.rows[row_idx].cells[0].innerHTML;
    let username = document.getElementById("user").value;
    let password = document.getElementById("pass").value;
    let request = {auth: {user: username, pass: password}, key: key};

    fetch('http://127.0.0.1:8087/ldap/ssh', {
        method: 'DELETE',
        body: JSON.stringify(request),
        mode: 'cors',
    }).then(res => {
        if (res.status === 200) {
            return res.json();
        } else {
            document.getElementById('formStatus').innerHTML = "<span style='background-color: red; color: white'>Failed to fetch</span>";
        }
    }).then(data => {
        if (data.result === "success") {
            table.deleteRow(row_idx);
            document.getElementById('formStatus').innerHTML = "<span style='background-color: green; color: white'>Success : Key deleted</span>";
        } else {
            document.getElementById('formStatus').innerHTML = "<span style='background-color: red; color: white'>Failed to delete</span>";
        }
    }).catch(err => {
        document.getElementById('formStatus').innerHTML = "<span style='background-color: red; color: white'>Error </span>";
        console.log(err);
    })
}

function add_to_table(key) {
    let table = document.getElementById("key_table");
    let row = table.insertRow();
    let cell1 = row.insertCell(0);
    cell1.innerHTML = key;
    let cell2 = row.insertCell(1);

    let button = document.createElement("button");
    button.innerHTML = "Delete";
    cell2.appendChild(button);
    //cell2.appendChild(document.createElement("button")).innerHTML = "Delete";
    button.addEventListener("click", function () {
        delete_key(row.rowIndex);
    });
}

document.addEventListener("DOMContentLoaded", () => {
    document.getElementById("get_keys").addEventListener("click", function () {
        if (got_keys) {
            console.log("got keys already");
            document.getElementById('formStatus').innerHTML = "<span style='background-color: red; color: white'>Got keys already</span>";
        } else {
            get_keys();
        }
    });
    document.getElementById("add_key_button").addEventListener("click", add_key);
});