const GRAPH_RES = 100;
var dataSmartphone = [];
var tempTCPCoords = null;
var tempSERIALCoords = null;
var tempDist = 0;

window.addEventListener("load", function(evt) {
    var output = document.getElementById("output");
    var checkBoxSmartphone = document.getElementById("checkbox1");
    var checkBoxUblox = document.getElementById("checkbox2");
    var ws;

    const wsOnCloseF = function (evt) {
        ws = null;
        print2("CLOSED");
        var intervalId;
        intervalId = setInterval(() => {
            console.log("reconnect websocket...")
            if (ws !== null && ws.CONNECTING) {
                return
            }
            if (ws !== null && ws.OPEN) {
                clearInterval(intervalId)
                return
            }
            ws = new WebSocket("ws://localhost:3011/ws");
            ws.onopen = wsOnOpenF
            ws.onclose = wsOnCloseF
            ws.onmessage = wsOnMessageF
            ws.onerror = wsOnErrorF
        }, 1000)
    }
    const wsOnMessageF = function (evt) {
        let dat = JSON.parse(evt.data)
        // console.log(dat)
        if ('SOURCE_TCP' in dat) {
            setIndicatorsTcp(dat.SOURCE_TCP)
        }
        try{
            if(!(dat.SOURCE_TCP.Orientation[0] === 0) && !(dat.SOURCE_TCP.Orientation[1] === 0) && !(dat.SOURCE_TCP.Orientation[2] === 0)){
                let heading = (dat.SOURCE_TCP.Orientation[2]+90)%360 // dat.SOURCE_TCP.Orientation[2] //
                // if (dat.SOURCE_TCP.HeadDevice !== 0) { heading = dat.SOURCE_TCP.HeadDevice; }
                // if (dat.SOURCE_TCP.HeadMotion !== 0) { heading = dat.SOURCE_TCP.HeadMotion; console.log("head motion") }

                renderTCP((dat.SOURCE_TCP.Orientation[0]*Math.PI/180),heading*Math.PI/180,-(dat.SOURCE_TCP.Orientation[1]*Math.PI/180))
            }
            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]])
                tempTCPCoords = [dat.SOURCE_TCP.Position[1], dat.SOURCE_TCP.Position[0]]
            }
            if(!(dat.SOURCE_TCP.Speed === 0)){
                addSpeedTcp(dat.SOURCE_TCP.Speed);
            }
            if(!(dat.SOURCE_TCP.HeadDevice === 0)){
                document.getElementById("compassTCP").innerHTML = " Heading Device: " + dat.SOURCE_TCP.HeadDevice.toFixed(2) + "°"
                // document.getElementById("needleTCP").style.transform = `rotate(${dat.SOURCE_TCP.HeadDevice}deg)`
            }
            if(!(dat.SOURCE_TCP.HeadMotion === 0)) {
                document.getElementById("compassTCPMot").innerHTML = "Heading Motion: " + dat.SOURCE_TCP.HeadMotion.toFixed(2) + "°"
            }

        }
        catch{
            // console.log("no TCP data")
        }
        if ('SOURCE_SERIAL' in dat) {
            setIndicatorsSer(dat.SOURCE_SERIAL)
        }
        try{
            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(0deg)`
                // 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)`
                renderSerial(dat.SOURCE_SERIAL.Orientation[0]*Math.PI/180,-dat.SOURCE_SERIAL.Orientation[2]*Math.PI/180,dat.SOURCE_SERIAL.Orientation[1]*Math.PI/180)
            }
            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]])
                tempSERIALCoords = [dat.SOURCE_SERIAL.Position[1], dat.SOURCE_SERIAL.Position[0]]
                if (!(tempTCPCoords == null)) {
                    console.log("tcp: " + tempTCPCoords)
                    console.log("serial: " + tempSERIALCoords)

                    var long1 = tempTCPCoords[0]
                    var lat1 = tempTCPCoords[1]
                    var long2 = tempSERIALCoords[0]
                    var lat2 = tempSERIALCoords[1]

                    var earthRadiusM = 6371000

                    var phi1 = lat1 * Math.PI / 180
                    var phi2 = lat2 * Math.PI / 180

                    var dlat = (lat2-lat1) * Math.PI / 180
                    var dlong = (long2 - long1) * Math.PI / 180

                    var a = Math.sin(dlat/2) * Math.sin(dlat/2) +
                        Math.cos(phi1) * Math.cos(phi2) *
                        Math.sin(dlong/2) * Math.sin(dlong/2)
                    var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1-a))
                    tempDist = (earthRadiusM * c).toFixed(3)
                    console.log("Dist: " + tempDist)
                    addDistanceToBarChart(tempDist)
                    document.getElementById("distance").innerHTML = "Distance: " + tempDist

                    if(tempDist <= dat.SOURCE_SERIAL.HAcc){
                        document.getElementById("greenlamp").style.backgroundColor = 'rgba(0, 230, 64, 1)'
                        document.getElementById("redlamp").style.backgroundColor = 'rgba(139, 0, 0, 1)'
                    }
                    else{
                        document.getElementById("greenlamp").style.backgroundColor = 'rgba(0, 100, 0, 1)'
                        document.getElementById("redlamp").style.backgroundColor = 'rgba(242, 38, 19, 1)'
                    }

                }
                tempTCPCoords = null

            }
            if(!(dat.SOURCE_SERIAL.Speed === 0)){
                addSpeedSerial(dat.SOURCE_SERIAL.Speed);
            }
            if(!(dat.SOURCE_SERIAL.HeadDevice === 0)){
                document.getElementById("compassSERIAL").innerHTML = "Heading Device: " + dat.SOURCE_SERIAL.HeadDevice.toFixed(2) + "°"
                // document.getElementById("needle").style.transform = `rotate(${dat.SOURCE_SERIAL.HeadDevice}deg)`
            }
            if(!(dat.SOURCE_SERIAL.HeadMotion === 0)) {
                document.getElementById("compassSERIALMot").innerHTML = "Heading Motion: " + dat.SOURCE_SERIAL.HeadMotion.toFixed(2) + "°"
            }
        }catch{
            // console.log("no serial data")
        }

        try{
            if(!(dat.SOURCE_SERIAL.HAcc === 0) && !(dat.SOURCE_SERIAL.VAcc === 0)){
                addSerialAccuracy(dat.SOURCE_SERIAL.HAcc, dat.SOURCE_SERIAL.VAcc)
                document.getElementById("serialHAcc").innerHTML = "Ublox HAcc: " + dat.SOURCE_SERIAL.HAcc.toFixed(3) + " m"
                document.getElementById("serialVAcc").innerHTML = "Ublox VAcc: " + dat.SOURCE_SERIAL.VAcc.toFixed(2) + " m"
                //console.log("acc: " + dat.SOURCE_SERIAL.HAcc, dat.SOURCE_SERIAL.VAcc)
            }
        }
        catch{
            // console.log("no Serial acc")
        }

        try{
            if(!(dat.SOURCE_TCP.HAcc === 0) && !(dat.SOURCE_TCP.VAcc === 0)){
                addTCPAccuracy(dat.SOURCE_TCP.HAcc, dat.SOURCE_TCP.VAcc)
                document.getElementById("tcpHAcc").innerHTML = "Phone HAcc: " + dat.SOURCE_TCP.HAcc.toFixed(2) + " m"
                document.getElementById("tcpVAcc").innerHTML = "Phone VAcc: " + dat.SOURCE_TCP.VAcc.toFixed(2) + " m"
                console.log("acc: " + dat.SOURCE_TCP.HAcc, dat.SOURCE_TCP.VAcc)
            }
        }
        catch{
            console.log("no TCP acc")
        }

    }
    const wsOnOpenF = function (evt) {
        print2("OPEN");
    }
    const wsOnErrorF = function(evt) {
        console.log(evt)
        print2("ERROR: " + evt);
    }


    ws = new WebSocket("ws://localhost:3011/ws");
    ws.onopen = wsOnOpenF
    ws.onclose = wsOnCloseF
    ws.onmessage = wsOnMessageF
    ws.onerror = wsOnErrorF



    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;
        // }

        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);
        }

        document.getElementById("tracking state").innerHTML = "Tracking state: LIVE"

        checkBoxSmartphone.disabled = true;
        checkBoxUblox.disabled = true;

        return false;
    };
    document.getElementById("close").onclick = function(evt) {
        if (!ws) {
            return false;
        }
        ws.close();
        return false;
    };

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

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

    document.getElementById("messungbeenden").onclick = function(evt) {
        if (ws) {
            fetch('http://localhost:3011/trackings/', { method: 'PUT', body: 'some data'})
                .then(results => results.json())
                .then(console.log);
            document.getElementById("tracking state").innerHTML = "Tracking state: LIVE"
        }
        return false;
    };

    document.getElementById("allesbeenden").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;
            document.getElementById("tracking state").innerHTML = "Tracking state: CLOSED"
            //ws.close();
        }
        return false;
    };
    var trackings = null;
    document.getElementById("messungladen").onclick = function(evt) {
        fetch('http://localhost:3011/trackings/', { method: 'GET'}).then(results => {
            return results.json()
        }).then(r => {
            console.log(r)
            if (!'data' in r) {
                return
            }
            trackings = r.data
            let sel = document.getElementById("meas")
            r.data.sort((a,b) => new Date(b.TimeCreated).getTime() - new Date(a.TimeCreated).getTime());
            r.data.forEach(tracking => {
                console.log(tracking)
                var option = document.createElement("option");
                option.text = tracking.TimeCreated + " Size: " + tracking.Size
                sel.add(option)
            })
            sel.disabled = false
            document.getElementById("replaystarten").disabled = false

        })
    };

    document.getElementById("replaystarten").onclick = function(evt) {
        emptyTCP.features[0].geometry.coordinates = []
        emptySERIAL.features[0].geometry.coordinates = []

        let sel = document.getElementById("meas")
        console.log(trackings[sel.selectedIndex].UUID)
        fetch(`http://localhost:3011/trackings/${trackings[sel.selectedIndex].UUID}?replay=true`, { method: 'GET'}).then(results => {
            return results.json()
        }).then(r => {
            console.log(r.data.Data)
        })
        document.getElementById("tracking state").innerHTML = "Tracking state: REPLAY"
    }

    document.getElementById("fullReplay").onclick = function(evt) {
        window.open('http://localhost:3011/tracking')
    }
});