(function() {
    let state = {
        'animation': 'off',
        'color': "#000000"
    }

    let setState = function() {
        let request = new XMLHttpRequest();
        request.onreadystatechange = function() {
            if (this.readyState == 4 && this.status == 200) {
                // process state here
                console.log("state changed to " + JSON.stringify(state));
            }
        };
        request.open("POST", "/api/state", true);
        request.setRequestHeader("Content-Type", "application/json;charset=UTF-8");
        request.send(JSON.stringify(state));
    }

    let animation_radios = document.getElementsByClassName("js_animation")
    for (let el of animation_radios) {
        el.addEventListener("click", function(ev) {
            state.animation = el.value;
            setState();
        })
        console.log("attached to " + el.value)
    }

    let color = document.getElementById("color")
    color.addEventListener("change", function(ev) {
        state.color = color.value;
        setState();
    })
    for (let el of document.getElementsByClassName("js_color")) {
        el.addEventListener("click", function(ev) {
            color.value = el.dataset.color;
            state.color = color.value;
            setState();
        })
        console.log("attached to " + el.value)
    }

    window.setInterval(function() {
        // console.log("Updating state")
        let request = new XMLHttpRequest();
        request.onreadystatechange = function(response) {
            if (this.readyState == 4 && this.status == 200) {
                var json = JSON.parse(this.responseText)
                // console.log("state is " + JSON.stringify(json));
                color.value = json.color;
                state.color = json.color;
                if (state.animation != json.animation) {
                    console.log("Animation has been updated to "  + json.animation)
                    state.animation = json.animation;
                    for (let el of animation_radios) {
                        el.checked = el.value == state.animation;
                    }
                }
            }
        };
        request.open("GET", "/api/state", true);
        request.send();
    }, 500);
})();