let db = firebase.firestore()

var logRef = db.collection("logs")

// var ySeries = []
// var querySnapshot = await logRef.get()
// querySnapshot.forEach((doc) => {
//     var docData = doc.data()
//     console.log("Document data:", docData)
//     ySeries.push(docData.value2)
// })


function init(){
    var ySeries = []
    logRef.orderBy("timestamp", "asc").get().then(querySnapshot=> {
        querySnapshot.forEach((doc) => {
            var docData = doc.data()
            console.log("Val ", docData.value2)
            ySeries.push(docData.value2)
        })
        createGraph(ySeries)
    })
}

function createGraph(yArray){
    var trace1 = {
        type: 'line',
        y: yArray,
        name: "Marker One",
        marker: {
            color: '#77EEEE',
            line: {
                width: 5
            }
        }
    }
    var data = [ trace1 ]

    var layout = { 
        title: 'Graph 1',
        font: {size: 18}
    }

    var config = {responsive: true}

    Plotly.newPlot('chart', data, layout, config)
}

init()

var counter = 0
logRef.onSnapshot(function(querySnapshot) {
    var updates = querySnapshot.docChanges()
    if (updates.length < 5){
        updates.forEach(function(change) {
            var docData = change.doc.data()
            Plotly.extendTraces('chart', {y:[[docData.value2]]}, [0])
            counter++
            if (counter > 50) {
                Plotly.relayout('chart', {
                    xaxis: {
                        range: [counter - 50, counter]
                    }
                })
            }
        })
    }
})

function realtimeUpdates(){
    let apiRef = db.collection("apiData")
    let toggleDiv = document.getElementById('toggle')
    let intensityDiv = document.getElementById('intensity')
    let colorDiv = document.getElementById('color')
    let lightDiv = document.getElementById('light')

    apiRef.doc("toggle").onSnapshot(function(doc) {
        var data =  doc.data()
        toggleDiv.innerHTML = "Toggle: " + data.state
    })

    apiRef.doc("intensity").onSnapshot(function(doc) {
        var data =  doc.data()
        intensityDiv.innerHTML = "Intensity: " + data.value
    })

    apiRef.doc("color").onSnapshot(function(doc) {
        var data =  doc.data()
        colorDiv.innerHTML = "Color: " + data.hex
    })

    apiRef.doc("light").onSnapshot(function(doc) {
        var data =  doc.data()
        lightDiv.innerHTML = "Object Light:<div style='padding-left: 20px;'>State: "+data.isOn+"<br>Color: "+data.color+"<br>Intensity: "+data.brightness+"</div>"
    })
}

realtimeUpdates()