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 map = L.map('map', {
    minZoom: 15,
    maxZoom: 18
}).setView([32.98649, -96.7485], 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
}

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

    const ecss = data.filter(d => d.loc === 'ecss')

    console.log(ecss)

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

async function displayCard(id) {
    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
    card.innerHTML = `
        <h1>${buildings[id].name}</h1>
        <p>Busier than usual</p>
        <canvas id="myChart" height="80"></canvas>
    `
    card.style.setProperty("--region", `'${id}'`)
    updateChart()
    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() {
    const ctx = document.getElementById('myChart').getContext('2d')
    new Chart(ctx, {
        type: 'line',
        data: {
            labels: ['Now', '1h ago', '2h ago', '3h ago', '4h ago', '5h ago'].reverse(),
            datasets: [{
                label: 'Density',
                data: [12, 19, 3, 5, 2, 3],
                // backgroundColor: [
                //     'rgba(255, 99, 132, 0.2)',
                //     'rgba(54, 162, 235, 0.2)',
                //     'rgba(255, 206, 86, 0.2)',
                //     'rgba(75, 192, 192, 0.2)',
                //     'rgba(153, 102, 255, 0.2)',
                //     'rgba(255, 159, 64, 0.2)'
                // ],
                // borderColor: [
                //     'rgba(255, 99, 132, 1)',
                //     'rgba(54, 162, 235, 1)',
                //     'rgba(255, 206, 86, 1)',
                //     'rgba(75, 192, 192, 1)',
                //     'rgba(153, 102, 255, 1)',
                //     'rgba(255, 159, 64, 1)'
                // ],
                borderColor: '#55aadd',
                backgroundColor: '#55aadd',
                // borderWidth: 2
            }]
        },
        options: {
            scales: {
                y: {
                    beginAtZero: true
                }
            }
        }
    })
}