const sql_table = document.getElementById("sql_table");
const upload = document.getElementById("upload");
const download = document.getElementById("download");
const logout = document.getElementById("logout");
const add = document.getElementById("add");

function setEventListeners(element, cb) {
    element.onmouseenter = async function () {
        this.style.backgroundColor = "blue";
    };
    element.onmouseleave = async function () {
        this.style.backgroundColor = "";
    };
    element.onmousedown = async function () {
        this.style.backgroundColor = "red";
    };
    element.ondblclick = async function () {
        this.style.backgroundColor = "blue";
        cb();
    };
}

setEventListeners(upload, async () => {
    const input = document.getElementById("file_input");
    const upload = (file) => {
        const formData = new FormData();
        formData.append('file', file);

        fetch(`${app_url}/upload`, {
            method: 'POST',
            body: formData
        }).then((response) => {
            if (!response.ok) {
                alert(`Upload unsuccessful. ${response.status}`);
            } else {
                location.reload();
            }
        });
    }
    const onSelectFile = () => upload(input.files[0]);
    input.addEventListener('change', onSelectFile, false);
    input.click();
});

setEventListeners(add, () => {
    window.location.href = `${app_url}/add`;
});

setEventListeners(download, () => {
    window.location.href = `${app_url}/download`;
});

setEventListeners(logout, () => {
    window.location.href = `${window.location.protocol}//logout@${window.location.host}/`;
});

const sql_rows = sql_table.rows;

for (let i = 1; i < sql_rows.length; i++) {
    setEventListeners(sql_rows[i], () => {
        window.location.href = `${app_url}/edit?element=${sql_rows[i].cells[0].innerText}`;
    });
}