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_progress_bar = document.querySelector("#uploadbar");
const upload_percents = document.querySelector("#uploadpercent");

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

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_block.classList.remove("hidden");
    uploadprogress.classList.remove("hidden");
});

update_image_button.addEventListener("click", () => {
    updateprogress.classList.remove("hidden");
});

const upload_firmware_image = async () => {
    upload_percents.innerHTML = "Upload progress 0 %";
    upload_progress_bar.style.width = "0%";
    uploadprogress_block.classList.remove("hidden");
    let image = update_firmware_input.files[0];
    let formData = new FormData();
    formData.append(image.name, image);
    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_progress_bar.style.width = `${percent}%`;
            upload_percents.innerHTML = `Upload progress ${percent} %`;
        }

        if (e.loaded == e.total) {
            upload_progress_bar.style.width = "100%";
            upload_percents.innerHTML = "Upload progress 100 %";
        }
    });
    request.onreadystatechange = () => {
        if (request.readyState === 4) {
            let jsondata = JSON.parse(request.responseText);
            if (jsondata.success) {
                image_table_body.innerHTML = `
              <td><b>${jsondata.response.file.name}<b/></td>
              <td>${(jsondata.response.file.size / 1024 / 1024).toFixed(2)}MB</td>
              <td>${jsondata.response.cpu}</td>
              <td>${jsondata.response.deviceName}</td>
              <td>${jsondata.response.version}</td>
              `;
                image_table.classList.remove("hidden-table");
                start_update_button.classList.remove("hidden-button");
            }
        }
    };
    request.open(
        "post",
        window.location.origin + "/wimic/updatefirmware/upload",
    );
    request.timeout = 45000;
    request.send(formData);
};

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