"use strict";

let dashboard = undefined;
window.addEventListener("DOMContentLoaded", () => {
    dashboard = new Dashboard();
});

class Dashboard {

    constructor() {
        this.markers = [];
        this.map = this.initMap();
        setInterval(() => this.updateTeams(), 10000)
        console.log("puzzeltocht dashboard initialised");
    }

    initMap() {
        let map = L.map('map', {
            center: [53.2212, 6.5586],
            zoom: 16,
            minZoom: 15,
            maxZoom: 18,
            maxBounds: [
                [53.2338, 6.5083],
                [53.2005, 6.6031]
            ]
        });

        L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
            attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
            maxZoom: 18
        }).addTo(map);
        return map;
    }

    updateTeams() {
        FetchJson.get("/api/dashboard/teams")
            .then(m => {
                this.showTeams(m);
                this.updateMarkers(m);
            })
            .catch(console.log);
    }

    showTeams(teams) {
        let activeTeams = '';
        teams.forEach(t => {
            if (t.started === true && t.finished === false) {
                activeTeams += '<li>';
                activeTeams += t.name + ' - ' + t.mission;
                if (t.location !== null) {
                    activeTeams += ' (' + t.location.latitude + ', ' + t.location.longitude + ')';
                }
                activeTeams += '</li>';
            }
        });
        teams.forEach(t => {
            if (t.started === false) {
                activeTeams += '<li>';
                activeTeams += t.name + ' - ' + t.mission;
                if (t.location !== null) {
                    activeTeams += ' (' + t.location.latitude + ', ' + t.location.longitude + ')';
                }
                activeTeams += '</li>';
            }
        });
        let finishedTeams = '';
        teams.forEach(t => {
            if (t.finished === true) {
                finishedTeams += '<li>';
                finishedTeams += t.name + ' - ' + t.mission;
                finishedTeams += '</li>';
            }
        });

        document.getElementById("activeTeams").innerHTML = activeTeams;
        document.getElementById("finishedTeams").innerHTML = finishedTeams;
    }

    updateMarkers(teams) {
        this.markers.forEach(m => m.remove());
        this.markers = [];
        teams.forEach(t => {
            if (t.location !== null && t.finished !== false && t.started === true) {
                let marker = L.marker([t.location.latitude, t.location.longitude]).addTo(this.map);
                marker.bindPopup(t.name).openPopup();
                this.markers.push(marker);
            }
        });
    }

}

class FetchJson {

    static get(url) {
        return fetch(url, {method: "GET"})
            .then(FetchJson.responseBody)
    }

    static responseBody(r) {
        if (!r.ok) {
            throw Error("HTTP " + r.status + " " + r.statusText + " " + r.url);
        }
        return r.json();
    }

}