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 draw_graph(ySeries, names, colors, div_name) {
    var trace = {
        type: data.type,
        y: ySeries.data,
        x: formatted_datetimes,
        text: names.title,
        marker: { color: colors.trace, line: { width: 5 } }
    }
    var data = [trace]

    var layout = {
        font: { size: 15, color: '#AAAAAA' },
        paper_bgcolor: '#111111',
        plot_bgcolor: '#111111',
        title: { text: names.title, font: { color: '#FFFFFF' } },
        xaxis: { title: { text: 'Date', font: { color: '#FFFFFF' } } },
        yaxis: { title: { text: names.yaxis, font: { color: '#FFFFFF' } } }
    }

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

    Plotly.newPlot(div_name, data, layout, config)
}


async function plot_graphs() {
    await get_all_data()
    console.log("Starting data plot...");
    draw_graph(
        {data: temperatures, type: 'line'},
        {title: "Air Temperature",yaxis: "Temperature in ºC"},
        {trace: '#00FFFF'},
        'temp_chart'
    )
    draw_graph(
        {data: humidities, type: 'line'},
        {title: "Humidity",yaxis: "Air humidity in %"},
        {trace: '#00AAFF'},
        'humidity_chart'
    )
    draw_graph(
        {data: winds, type: 'line'},
        {title: "Wind speed",yaxis: "Wind speed in m/s"},
        {trace: '#AAFFAA'},
        'wind_chart'
    )
    draw_graph(
        {data: precipitations, type: 'bar'},
        {title: "Precipitation",yaxis: "Rainfall in mm"},
        {trace: '#FF3333'},
        'rain_chart'
    )
    draw_graph(
        {data: clouds, type: 'line'},
        {title: "Cloudiness",yaxis: "Cloud coverage in %"},
        {trace: '#FFFFFF'},
        'cloud_chart'
    )
}


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