{% extends 'base.html.twig' %}

{% block stylesheets %}
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.6.0/dist/leaflet.css" integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ==" crossorigin=""/>
{% endblock %}

{% block body %}
    <div id="dashboard_map" style="height:100%;"></div>
    <!-- BEGIN: Subheader -->
    <!-- END: Subheader -->
{% endblock %}


{% block scripts %}
<script src="https://cdnjs.cloudflare.com/ajax/libs/paho-mqtt/1.0.1/mqttws31.min.js" type="text/javascript"></script>
<script>

var map;

function initMap() {
    var default_lat = {% trans %}default_lat{% endtrans %};
    var default_lng = {% trans %}default_long{% endtrans %};

    var rider_popup_url = '/riders/[id]/popup';
    var cust_popup_url = '/job-order/[id]/popup';
    map = mapCreate('dashboard_map', default_lat, default_lng, 'road', 13, rider_popup_url, cust_popup_url);
}
</script>

{{ include('map/' ~ map_js_file) }}


<script>
// TODO: put this in .env
var mqtt;
var timeout = 2000;
var host = '{{ mqtt_host }}';
var port = {{ mqtt_port }};

var icon_rider_available = L.divIcon({
    className: 'map-div-icon',
    html: "<div style='background-color:#00FF00;' class='marker-pin'></div><i class='fa fa-bolt awesome'>",
    iconSize: [39, 42],
    iconAnchor: [15, 42]
});

function onConnect() {
    console.log('connected!');

    mqtt.subscribe('rider/+/location');
}

function onMessage(msg) {
    // console.log(msg);
    console.log('received message');

    var channel = msg.destinationName;
    var chan_split = channel.split('/');
    var payload = msg.payloadString;

    // handle different channels
    switch (chan_split[0]) {
        case "rider":
            handleRider(chan_split, payload);
            break;
    }
}


function handleRider(chan_split, payload) {
    console.log("rider message");
    switch (chan_split[2]) {
        case "location":
            console.log("got location for rider " + chan_split[1] + " - " + payload);
            pl_split = payload.split(':');
            console.log(pl_split);

            // check for correct format
            if (pl_split.length != 2)
                break;

            var lat = parseFloat(pl_split[0]);
            var lng = parseFloat(pl_split[1]);

            // move marker
            console.log(rider_markers[chan_split[1]]);

            // check if marker exists
            if (rider_markers.hasOwnProperty(chan_split[1])) {
                // marker's there, move it
                rider_markers[chan_split[1]].setLatLng(L.latLng(lat, lng));
            } else {
                // no marker, make one
                console.log('creating marker');
                // TODO: make it add to the correct map layer
                rider_markers[chan_split[1]]= L.marker([lat, lng], { icon: icon_rider_available }).addTo(map);;
            }
            break;
    }
}

function mqttConnect() {
    var d = new Date();
    var client_id = "dash-{{ app.user.getID }}-" + d.getMonth() + "-" + d.getDate() + "-" + d.getHours() + "-" + d.getMinutes() + "-" + d.getSeconds() + "-" + d.getMilliseconds();
    console.log(client_id);

    mqtt = new Paho.MQTT.Client(host, port, client_id);
    var options = {
        useSSL: true,
        timeout: 3,
        onSuccess: onConnect,
    };

    mqtt.onMessageArrived = onMessage;

    console.log('connecting to mqtt server...');
    mqtt.connect(options);
}

mqttConnect();

</script>
{% endblock %}