// Declare alle functies
// lege variabel kan nog ingevult worden
// getal is een float of int
// [] betekent array
let port;
let reader;
let decoder = new TextDecoder("utf-8");
let counterElement = document.getElementById("counter");
let readibleoutput = 0;
let xArray = [];
let tempArray = [];
let humidArray = [];
let lichtArray = [];
let humid = 0;
let licht = 0;

// Request a port and open a connection.
async function connect() {
    //vraag aan de browser om een serial port te selecteren
    port = await navigator.serial.requestPort();
    await port.open({ baudRate: 9600 });
    reader = port.readable.getReader();
    console.log("Port is open!");
    readLoop()
}

// Read data
async function readLoop() {
    let buffer = [];

    // loop until reader.cancel() is called
    while (true) {
        // Wait for data
        const { value, done } = await reader.read();


        for (let iByte = 0; iByte < value.length; iByte++) {
            let singleByte = value[iByte];

            if (singleByte != 10) {
                buffer.push(singleByte);
            }

            else {
                let sensorString = decoder.decode(new Uint8Array(buffer));
                let SensorValues;
                
                //zet alle data in een json array
                try {
                    SensorValues = JSON.parse(sensorString);
                } catch (e) {
                    console.log("json niet geparserd");
                }

                if (SensorValues) {
                    console.log(SensorValues)

                    //zet alle data in een array
                     tempArray.push(SensorValues[0])
                     humidArray.push(SensorValues[1])
                     lichtArray.push(SensorValues[2])

                }

                buffer = [];
                //             var array = sensorString.split(','),
                //             temp = array[0], humid = array[1], licht = array[2];
                //                console.log(temp);
                //                console.log(humid);
                //                console.log(licht);
                document.getElementById("temp").innerHTML = SensorValues[0];
                document.getElementById("humid").innerHTML = SensorValues[1];
                document.getElementById("licht").innerHTML = SensorValues[2];

                plotly(tempGraph, tempArray)
                plotly(humidGraph, humidArray)
                plotly(lightGraph, lichtArray)
            }

            // Show the received data in the console        

            // Exit the loop when done
            if (done) {
                console.log('[readLoop] DONE', done);
                reader.releaseLock();
                break;
            }
        }

    }
}

// Close the port
async function disconnect() {
    await reader.cancel();
    await port.close();
    console.log("Port is closed!");
}

function plotly(graph, array){
    Plotly.newPlot(graph, [{
        y: array,
        mode: 'lines',
        line: {color: '#80CAF6'}
      }]);
}