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)

    if (id === "MC") {
        poly.setStyle({
            color: "#00e676",
            opacity: .5
        })
    } else if (id === "SU"){
        poly.setStyle({
            color: "yellow",
            opacity: .5
        })
    }

    // const label = new L.marker(poly.getCenter(), { opacity: 0.00 }) //opacity may be set to zero
    // label.bindTooltip(id, {permanent: true, className: "my-label", offset: [0, 0] });
    // label.addTo(map)
}

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


const mediaQuery = window.matchMedia("(min-width: 720px)")
mediaQuery.addEventListener("change", updateSize)
requestAnimationFrame(updateSize)

function updateSize() {
    map.invalidateSize(true)
    console.log("updatesize!")
}
// map.invalidateSize()