const buildings = {
    "MC": {
        name: "McDermott Library",
        bounds: [
            [32.98732, -96.74801],
            [32.98732, -96.74723],
            [32.98660, -96.74723],
            [32.98660, -96.74801]
        ],
    },
    "SU": {
        name: "Student Union",
        bounds: [
            [32.98711, -96.74909],
            [32.98711, -96.74848],
            [32.98661, -96.74849],
            [32.98661, -96.74910]
        ]
    },
    "ECSW": {
        name: "Engineering and Computer Science West",
        bounds: [
            [32.98639, -96.75217],
            [32.98638, -96.75128],
            [32.98579, -96.75119],
            [32.98581, -96.75217]
        ]
    }
}

const data = getData()

const map = L.map('map', {
    minZoom: 15,
    maxZoom: 18
}).setView([32.98613, -96.75042], 18)


L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', {
    maxZoom: 18,
    attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
    id: 'mapbox/dark-v10',
    // id: 'mapbox/streets-v11',
    tileSize: 512,
    zoomOffset: -1
}).addTo(map)


for (const [id, building] of Object.entries(buildings)) {
    // console.log(id, building)
    const poly = L.polygon(building.bounds)

    poly.on('click', ev => {
        // console.log(ev)
        map.panTo(poly.getCenter())
        displayCard(id)
    }).addTo(map)

    poly.setStyle({
        color: '#727272',
        opacity: .5
    })

    buildings[id].poly = poly
}

// Update map colors every minute
drawRegions()
setTimeout(drawRegions, 60 * 1000)

async function drawRegions() {
    const data = await getData()

    const ecsw = data.filter(d => d.loc === 'ECSW' && Date.now() - d.time < 60 * 60 * 1000)

    console.log(ecsw)

    const avg = ecsw.reduce((acc, v) => acc + v.count, 0) / ecsw.length
    const current = ecsw[ecsw.length - 1].count
    const delta = current - avg
    const busy = delta > 0
    const color = busy ? '#ff0000' : '#00ff00'
    buildings.ECSW.poly.setStyle({ color })
    console.log({avg, current, delta, color})
}

function getData() {
    return fetch('/db.csv').then(res => res.text()).then(text => {
        return text.trim().split('\n').map(line => {
            const [loc, time, count] = line.split(',')
            return { loc, time: new Date(+time), count: parseInt(count) }
        })
    })
}


async function displayCard(id) {
    const data = (await getData()).filter(d => d.loc === id && Date.now() - d.time < 60 * 60 * 1000)
    const card = document.getElementById("card")
    await card.animate([
        { transform: 'translateY(50px)', opacity: "0" },
    ], {
        duration: 200,
        fill: 'forwards',
        easing: 'cubic-bezier(0.4, 0.0, 1, 1)'
    }).finished

    console.log(data)

    const avg = data.reduce((acc, v) => acc + v.count, 0) / data.length
    const current = data[data.length - 1]?.count ?? NaN
    const delta = current - avg
    const busy = delta > 0
    const color = busy ? '#ff0000' : '#00ff00'

    console.log({ avg, current, delta, busy, color })

    const msg = Number.isNaN(delta)
        ? "No data..."
        : (busy ? "Busier than usual": "Not as busy :)")

    card.innerHTML = `
        <h1>${buildings[id].name}</h1>
        <p>${msg}</p>
        <canvas id="myChart" height="80"></canvas>
    `
    card.style.setProperty("--region", `'${id}'`)
    updateChart(data)
    await card.animate([
        { transform: 'translateY(0%)', opacity: "1" },
    ], {
        duration: 200,
        fill: 'forwards',
        easing: 'cubic-bezier(0.0, 0.0, 0.2, 1)'
    }).finished
}


function updateChart(data) {
    const parsed = data.map(d => {
        const TEN_MINUTES = 10 * 60 * 1000
        // this is 0-5
        let ago = Math.floor((Date.now() - d.time) / TEN_MINUTES)
        // if (20 < ago) ago = 20
        return {time: d.time, ago, count: d.count}
    }).reduce((acc, v) => {
        if (!acc[v.ago]) {
            acc[v.ago] = []
        }
        acc[v.ago].push(v.count)
        return acc
    }, []).map(v => v.reduce((acc, v) => acc + v, 0) / v.length)

    const ctx = document.getElementById('myChart').getContext('2d')
    const labels = ['Now', '10m ago', '20m ago', '30m ago', '40m ago', '50m ago'].reverse()
    console.log(parsed.slice(0, labels.length))

    new Chart(ctx, {
        type: 'line',
        data: {
            labels,
            datasets: [{
                label: 'Density',
                data: parsed.slice(0, labels.length).reverse(),
                borderColor: '#55aadd',
                backgroundColor: '#55aadd',
                // borderWidth: 2
            }]
        },
        options: {
            scales: {
                x: {
                    beginAtZero: true,
                },
                y: {
                    beginAtZero: true,
                }
            }
        }
    })
}