const checker = document.querySelector(".checker");
const checked = document.querySelector(".checked");
const noyes = document.querySelector("#noyes");
const auto_reboot_flag = document.querySelector("#auto_reboot_flag");

const upload_image_button = document.querySelector("#upload_image_button");
const upload_image_input = document.querySelector("#upload_image_input");
const update_block = document.querySelector("#update_block");
const uploadprogress_block = document.querySelector("#uploadprogress");
const upload_percents = document.querySelector("#uploadpercent");

const update_image_button = document.querySelector("#update_image_button");
const updateprogress = document.querySelector("#updateprogress");
const updatepercent = document.querySelector("#updatepercent");

let progress = 0;
let progress_interval;

checker.addEventListener("click", () => {
    auto_reboot_flag.checked = !auto_reboot_flag.checked;
    if (auto_reboot_flag.checked) {
        checker.classList.add("active");
        checked.classList.add("active");
        noyes.innerHTML = "(Yes)";
    } else {
        checked.classList.remove("active");
        checker.classList.remove("active");
        noyes.innerHTML = "(No)";
    }
});

upload_image_button.addEventListener("click", () => {
    upload_image_input.click();
});

update_image_button.addEventListener("click", () => {
    if (confirm("Start Update Firmware?")) {
        updatepercent.style.width = "0%";
        updatepercent.innerHTML = "Updated: 0 %";
        updateprogress.classList.remove("hidden");
        start_progress();
        fetch(routes.update_image(), {
            method: "Post",
            body: `{"token":"${localStorage.getItem("token")}", "needAutoReboot": ${auto_reboot_flag.checked}}`,
        })
            .then((data) => data.json())
            .then((jsondata) => {
                if (jsondata.success === true) {
                    stop_progress();
                    notification("Updated successful", "success");
                    updatepercent.style.width = "100%";
                    updatepercent.innerHTML = "Updated: 100 %";
                } else {
                    stop_progress();
                    updatepercent.style.width = "100%";
                    updatepercent.innerHTML = "Updated: 100 %";
                    notification("Unexpected error", "error");
                }
            });
    }
});

const upload_firmware_image = async () => {
    upload_percents.innerHTML = "Upload progress 0 %";
    upload_percents.style.width = "0%";
    uploadprogress_block.classList.remove("hidden");
    let image = upload_image_input.files[0];
    let formData = new FormData();
    formData.append("image", image);
    formData.append("token", localStorage.getItem("token"));
    var request = new XMLHttpRequest();
    request.upload.addEventListener("progress", (e) => {
        var file1Size = image.size;
        if (e.loaded <= file1Size) {
            var percent = Math.round((e.loaded / file1Size) * 100);
            upload_percents.style.width = `${percent}%`;
            upload_percents.innerHTML = `Upload progress ${percent} %`;
        }

        if (e.loaded == e.total) {
            upload_percents.style.width = "100%";
            upload_percents.innerHTML = "Upload progress 100 %";
        }
    });
    request.onreadystatechange = () => {
        if (request.readyState === 4) {
            console.log(request.responseText);
            const jsondata = JSON.parse(request.responseText);
            if (jsondata.status === true) {
                update_image_button.classList.remove("hidden");
                update_block.classList.remove("hidden");
            } else {
                notification("Upload error", "error");
            }
        }
    };
    request.open("post", routes.upload_image());
    request.timeout = 450000;
    request.send(formData);
};

upload_image_input.addEventListener("change", (event) => {
    if (event.target.files[0]) {
        upload_firmware_image();
    }
});

const start_progress = () => {
    updatepercent.style.width = "0%";
    progress = 0;
    updatepercent.innerHTML = "Updated: 0 %";
    updateprogress.classList.remove("hidden");
    progress_interval = setInterval(() => {
        fetch(routes.update_progress())
            .then((data) => data.json())
            .then((jsondata) => {
                progress = jsondata.progress;
                updatepercent.style.width = `${progress}%`;
                updatepercent.innerHTML = `Updated: ${progress} %`;
                if (progress === 100) {
                    stop_progress();
                }
            });
    }, 500);
};

const stop_progress = () => {
    clearInterval(progress_interval);
};