class DashboardMap {
    constructor(options, rider_markers, cust_markers) {
        this.options = options;
        this.rider_markers = rider_markers;
        this.cust_markers = cust_markers;

        // layer groups
        this.lg_avail_rider = L.layerGroup();
        this.lg_jo_rider = L.layerGroup();
        this.lg_cust = L.layerGroup();
    }

    initialize() {
        // main map
        this.map = L.map(this.options.div_id).setView(
            [this.options.center_lat, this.options.center_lng],
            this.options.zoom
        );

        // add tile layer
        var streets = L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token={accessToken}', {
            attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
            maxZoom: 18,
            id: 'mapbox/streets-v11',
            accessToken: this.options.access_token
        }).addTo(this.map);

        // layer groups
        this.lg_avail_rider.addTo(this.map);
        this.lg_jo_rider.addTo(this.map);
        this.lg_cust.addTo(this.map);

        // base layer
        var baseMaps = {
            'Streets': streets
        };

        // overlay layer
        var overlayMaps = {
            'Available Riders' : this.lg_avail_rider,
            'JO Riders' : this.lg_jo_rider,
            'Customers' : this.lg_cust
        }

        L.control.layers(baseMaps, overlayMaps).addTo(this.map);

        return this.map;
    }

    loadLocations(location_url) {
        console.log(this.rider_markers);
        var my = this;
        $.ajax({
            url: location_url,
        }).done(function(response) {
            // clear all markers
            my.lg_avail_rider.clearLayers();
            my.lg_jo_rider.clearLayers();
            my.lg_cust.clearLayers();
            // get riders and mark
            var riders = response.riders;

            $.each(riders, function(rider_id, rider_data) {
                // rider location
                var point = rider_data['loc'];
                var lat = point[0];
                var long = point[1];

                // customer location
                var cloc = rider_data['cust_loc'];
                var clat = cloc[0];
                var clong = cloc[1];

                // create rider markers
                if (rider_data['has_jo']) {
                    var jo_data = rider_data['jo'];

                    my.rider_markers[rider_id] = L.marker([lat, long], { icon: my.options.icons.rider_active_jo }).bindPopup('Loading...');
                    my.cust_markers[jo_data['id']] = L.marker([clat, clong], { icon: my.options.icons.customer }).bindPopup('Loading...');

                    my.lg_cust.addLayer(my.cust_markers[jo_data['id']]);
                    my.lg_jo_rider.addLayer(my.rider_markers[rider_id]);

                    // customer popup ajax
                    my.cust_markers[jo_data['id']].on('click', function(e) {
                        var popup = e.target.getPopup();
                        var url = my.options.cust_popup_url.replace('[id]', jo_data['id']);
                        console.log(url);
                        $.get(url).done(function(data) {
                            popup.setContent(data);
                            popup.update();
                        });
                    });
                } else {
                    my.rider_markers[rider_id]= L.marker([lat, long], { icon: my.options.icons.rider_available }).bindPopup('Loading...');
                    my.lg_avail_rider.addLayer(my.rider_markers[rider_id]);
                }

                // ajax loading of rider popup
                my.rider_markers[rider_id].on('click', function(e) {
                    var popup = e.target.getPopup();
                    var url = my.options.rider_popup_url.replace('[id]', rider_id);
                    console.log(url);
                    $.get(url).done(function(data) {
                        popup.setContent(data);
                        popup.update();
                    });
                });
            });

            // console.log(rider_markers);
        });
    }
}