// key listener
document.addEventListener("keypress", function onEvent(event) {
    if (event.key !== "Enter") {
        return;
    }
    startScan();
});

let scanInProgress = false;

// start a scan
function startScan() {
    if (scanInProgress === true) {
        return;
    } 
    scanInProgress = true;
    let button = document.getElementById("button");
    let buttonDefaultColor = button.style.backgroundColor;
    button.style.backgroundColor = "#ffee00";
    let buttonImg = document.getElementById("button-img");
    let result = document.getElementById("result");
    result.style.visibility = "hidden";
    let text = document.getElementById("text");
    let input = document.getElementById("input");
    input.style.opacity = "0"

    // start rotate animation
    let rotate = true;
    let rotationDegree = 0;
    let rotationInterval = setInterval(() => {
        rotationDegree = rotateElement(buttonImg, rotationInterval, rotationDegree, !rotate, "Y");
    }, 5);

    // call api
    fetch('scan', {
        method: 'post',
        headers: {
            "Content-type": "application/json"
        },
        body: JSON.stringify({
            filename: document.getElementById("input-filename").value
        })
    }).then(response => {
        return response.json();
    }).then(response => {
        let buttonColor = "#008800";
        result.style.visibility = "visible";
        text.innerHTML = response.Message;
        if (response.State !== "ok") {
            text.style.color = "#ff0000";
            buttonColor = "#880000";
            text.innerHTML = "an error occured<br>" + text.innerHTML;
        } else {
            text.innerHTML = "scan finished<br>" + text.innerHTML;
        }
        text.style.opacity = "100";
        button.style.backgroundColor = buttonColor;
        rotate = false;
        setTimeout(() => {
            text.style.opacity = "0";
            result.style.visibility = "hidden";
            button.style.backgroundColor = buttonDefaultColor;
            input.style.opacity = "100";
            scanInProgress = false;
        }, 5000);
    });
}

function rotateElement(element, interval, degree, stop, direction) {
    if (element === undefined || interval === undefined) {
        return;
    }
    if (degree === undefined) {
        degree = 0;
    }
    if (stop === true && degree % 360 === 0) {
        clearInterval(interval);
        return;
    }
    degree++;
    let value = "rotate";
    if (direction !== undefined && (direction.toLowerCase() === "x" || direction.toLowerCase() === "y")) {
        value += direction;
    }
    element.style.transform = value + "(" + degree + "deg)";
    return degree;
}