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

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/upload', {
            method: 'POST',
            body: formData
        }).then((response) => {
            location.reload();
        });
    }
    const onSelectFile = () => upload(input.files[0]);
    input.addEventListener('change', onSelectFile, false);
    input.click();
});

setEventListeners(download, () => {
    window.location.href = "/app/download";
});

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