var timestamps = []
var temperatures = []
var humidities = []
var winds = []
var precipitations = []
var clouds = []
var datetimes = []
var formatted_datetimes = []
var test_1 = [1, 2, 3, 4, 5, 6, 7]
var test_2 = [1, 2, 3, 4, 5, 6, 7]

async function get_all_data() {
    let database = firebase.firestore()
    let weather_data = database.collection("weather_data")
    console.log("Waiting for data...");
    var data_snapshot = await weather_data.orderBy("timestamp", "asc").get()
    console.log("Got data, Processing...");
    data_snapshot.forEach((data_slice) => {
        var slice = data_slice.data()
        timestamps.push(slice.timestamp)
        datetimes.push(slice.datetime)
        formatted_datetimes.push(slice.datetime.toDate())
        temperatures.push(slice.temp)
        humidities.push(slice.humidity)
        winds.push(slice.wind)
        precipitations.push(slice.rain_1h)
        clouds.push(slice.cloud)
    })
    console.log("Added all data...");
}

function createGraph() {
    var trace1 = {
        type: 'line',
        y: temperatures,
        x: formatted_datetimes,
        text: "trace.text variable",
        name: "Air temperature",
        marker: {
            color: '#00FFFF',
            line: {
                width: 5
            }
        }
    }
    var data = [trace1]

    var layout = {
        title: 'Air temperature',
        font: { size: 18, color: '#AAAAAA' },
        paper_bgcolor: '#111111',
        plot_bgcolor: '#111111',
        xaxis: {
            title: {
                text: 'Date'
            }
        },
        yaxis: {
            title: {
                text: 'Temperature in deg C'
            }
        }
    }

    var config = { responsive: true, scrollZoom: true, displaylogo: false}

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

async function plot_graphs() {
    await get_all_data()
    console.log("Starting data plot...");
    createGraph()
    // createGraph_2();
}


function createGraph_2() {
    console.log(temperatures);
    var data = [ {type: "line", x: formatted_datetimes, y: temperatures} ]
    var layout = {title: 'Graph 2', font: { size: 18 }}
    var config = { responsive: true }
    Plotly.newPlot('chart_2', data, layout, config)

}

plot_graphs();



// 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]
//                     }
//                 })
//             }
//         })
//     }
// })