const GRAPH_RES = 100;
var dataSmartphone = [];
window.addEventListener("load", function(evt) {
    var orientation = [0,0,0];
    var multiplier = 180/Math.PI/15
    var output = document.getElementById("output");
    var input = document.getElementById("input");
    var checkBoxSmartphone = document.getElementById("checkbox1");
    var checkBoxUblox = document.getElementById("checkbox2");
    var ws;
    var print = function(message) {
        var d = document.createElement("div");
        d.textContent = message;
        output.appendChild(d);
    };
    var print2 = function(message) {
        var d = document.createElement("p");
        d.innerText = message;
        oldNode = output.firstChild
        output.replaceChild(d, oldNode)
    };
    document.getElementById("open").onclick = function(evt) {
        if (ws && ws.OPEN) {
            print2("Websocket already open")
            return false;
        }
        ws = new WebSocket("ws://localhost:3011/ws");
        ws.onopen = function(evt) {
            print("OPEN");
        }
        ws.onclose = function(evt) {
            ws = null;
            print2("CLOSE");
        }

        if(checkBoxSmartphone.checked && checkBoxUblox.checked){
            fetch('http://localhost:3011/trackings?serial=true&tcp=true', { method: 'POST', body: 'some test data'})
                .then(results => results.json())
                .then(console.log);
        }
        else if(!(checkBoxSmartphone.checked) && checkBoxUblox.checked){
            fetch('http://localhost:3011/trackings?serial=true&tcp=false', { method: 'POST', body: 'some test data'})
                .then(results => results.json())
                .then(console.log);
        }
        else if(checkBoxSmartphone.checked && !(checkBoxUblox.checked)){
            fetch('http://localhost:3011/trackings?serial=false&tcp=true', { method: 'POST', body: 'some test data'})
                .then(results => results.json())
                .then(console.log);
        }
        else if(!(checkBoxSmartphone.checked) && !(checkBoxUblox.checked)){
            fetch('http://localhost:3011/trackings?serial=false&tcp=false', { method: 'POST', body: 'some test data'})
                .then(results => results.json())
                .then(console.log);
        }
        checkBoxSmartphone.disabled = true;
        checkBoxUblox.disabled = true;

        ws.onmessage = function(evt) {
            //print2("RESPONSE: " + evt.data);
            // let dat = JSON.parse(evt.data)["bmi26x gyroscope"]
            // let dat = JSON.parse(evt.data)["lsm6dsm gyroscope"]
            //let dat = JSON.parse(evt.data)["lsm6ds3c gyroscope"]
            let dat = JSON.parse(evt.data)
            dataSmartphone.push(dat)
            //console.log(evt.data)
            console.log("JSON geparsed onmessage", dat)


            if(checkBoxSmartphone.checked && !checkBoxUblox.checked){
                if(!(dat.SOURCE_TCP.Orientation[0] === 0) && !(dat.SOURCE_TCP.Orientation[1] === 0) && !(dat.SOURCE_TCP.Orientation[2] === 0)){
                    document.getElementById("gyroscopeTCP").style.transform = `rotateX(${dat.SOURCE_TCP.Orientation[0]}deg) rotateY(${dat.SOURCE_TCP.Orientation[1]}deg) rotateZ(${dat.SOURCE_TCP.Orientation[2]}deg)`
                }
                if(!(dat.SOURCE_TCP.Position[1] === 0) && !(dat.SOURCE_TCP.Position[0] === 0)){
                    document.getElementById("TCPlong").innerHTML = "Smartphone long: " + dat.SOURCE_TCP.Position[1]
                    document.getElementById("TCPlat").innerHTML = "Smartphone lat: " + dat.SOURCE_TCP.Position[0]
                    updateMapTCP(dat.SOURCE_TCP.Position[1], dat.SOURCE_TCP.Position[0])
                    map.panTo([dat.SOURCE_TCP.Position[1], dat.SOURCE_TCP.Position[0]])
                }
            }
            if(checkBoxUblox.checked && !checkBoxSmartphone.checked){
                if(!(dat.SOURCE_SERIAL.Orientation[0] === 0) && !(dat.SOURCE_SERIAL.Orientation[1] === 0) && !(dat.SOURCE_SERIAL.Orientation[2] === 0)){
                    document.getElementById("gyroscopeSERIAL").style.transform = `rotateX(${dat.SOURCE_SERIAL.Orientation[0]}deg) rotateY(${dat.SOURCE_SERIAL.Orientation[1]}deg) rotateZ(${dat.SOURCE_SERIAL.Orientation[2]}deg)`
                }
                if(!(dat.SOURCE_SERIAL.Position[1] === 0) && !(dat.SOURCE_SERIAL.Position[0] === 0)){
                    document.getElementById("SERIALlong").innerHTML = "Ublox long: " + dat.SOURCE_SERIAL.Position[1]
                    document.getElementById("SERIALlat").innerHTML = "Ublox lat: " + dat.SOURCE_SERIAL.Position[0]
                    updateMapSERIAL(dat.SOURCE_SERIAL.Position[1], dat.SOURCE_SERIAL.Position[0])
                    map.panTo([dat.SOURCE_SERIAL.Position[1], dat.SOURCE_SERIAL.Position[0]])
                }
            }
            if(checkBoxSmartphone.checked && checkBoxUblox.checked){
                if(!(dat.SOURCE_TCP.Position[1] === 0) && !(dat.SOURCE_TCP.Position[0] === 0)){
                    document.getElementById("TCPlong").innerHTML = "Smartphone long: " + dat.SOURCE_TCP.Position[1]
                    document.getElementById("TCPlat").innerHTML = "Smartphone lat: " + dat.SOURCE_TCP.Position[0]
                }
                if(!(dat.SOURCE_SERIAL.Position[1] === 0) && !(dat.SOURCE_SERIAL.Position[0] === 0)){
                    document.getElementById("SERIALlong").innerHTML = "Ublox long: " + dat.SOURCE_SERIAL.Position[1]
                    document.getElementById("SERIALlat").innerHTML = "Ublox lat: " + dat.SOURCE_SERIAL.Position[0]
                    updateMapSERIAL(dat.SOURCE_SERIAL.Position[1], dat.SOURCE_SERIAL.Position[0])
                    map.panTo([dat.SOURCE_SERIAL.Position[1], dat.SOURCE_SERIAL.Position[0]])
                }
                if(!(dat.SOURCE_TCP.Position[1] === 0) && !(dat.SOURCE_SERIAL.Position[1] === 0)){
                    document.getElementById("diffLong").innerHTML = "Differenz long: " + Math.abs(dat.SOURCE_TCP.Position[1] - dat.SOURCE_SERIAL.Position[1])
                }
                if(!(dat.SOURCE_TCP.Position[0] === 0) && !(dat.SOURCE_SERIAL.Position[0] === 0)){
                    document.getElementById("diffLat").innerHTML = "Differenz lat: " + Math.abs(dat.SOURCE_TCP.Position[0] - dat.SOURCE_SERIAL.Position[0])
                }
            }
            /*
                                console.log(dat)
                                orientation[0] += dat[0] * multiplier
                                orientation[1] += dat[1] * multiplier
                                orientation[2] += dat[2] * multiplier
                                // dataset.push(orientation[0])
                                // while (dataset.length >= 50) {
                                //     dataset.shift();
                                // }
                                // addData(orientation[0] / multiplier)
            */
            addSpeedData(/*dat.SOURCE_TCP.Speed,*/ dat.SOURCE_SERIAL.Speed);

            // addData(dat[0])
        }

        ws.onerror = function(evt) {
            print("ERROR: " + evt.data);
        }
        return false;
    };
    document.getElementById("send").onclick = function(evt) {
        if (!ws) {
            return false;
        }
        print("SEND: " + input.value);
        ws.send(input.value);
        return false;
    };
    document.getElementById("close").onclick = function(evt) {
        if (!ws) {
            return false;
        }
        ws.close();
        return false;
    };

    //------------------------Buttons------------------------------

    document.getElementById("messung starten").onclick = function(evt) {
        if (ws) {
            fetch('http://localhost:3011/trackings/', { method: 'PATCH', body: 'some data'})
                .then(results => results.json())
                .then(console.log);
        }
        return false;
    };

    document.getElementById("alles beenden").onclick = function(evt) {
        if (ws) {
            fetch('http://localhost:3011/trackings/', { method: 'DELETE', body: 'some data'})
                .then(results => results.json())
                .then(console.log);
            checkBoxSmartphone.disabled = false;
            checkBoxUblox.disabled = false;
        }
        return false;
    };
});