//AIzaSyAPYatPrCcmNcVdAO_MF0YhO3c1mgdLvuQ
var app = angular.module('batmanDelivers', ['ngSanitize', 'ui.select']);

///////////
//Controller
///////////

app.controller('myCtrl', function($scope, $http, $timeout, $rootScope) {

    var initializing = true;


    var map = null;
    var waypoints = [];
    var markers = [];
    var route = null;
    var map = null;
    var marker = null;

    var myLatLng = { lat: 0, lng: 0 };
    var directionsService = new google.maps.DirectionsService;
    var directionsDisplay = new google.maps.DirectionsRenderer({
      polylineOptions: {
      strokeColor: "#d8d8d8"
    }
    });


    var end;
    var marked;
    var valid = true;
    initMap();

    $scope.stops = [{
        "Description": "Start typing to search...",
        "changed": false,
        valid: false,
        id: 1

    }, {
        "Description": "Start typing to search...",
            "changed": false,
        valid: false,
        id: 2
    }]


    $scope.$on('StopChanged', function () {
        var validstops = $scope.stops.filter(function (x) { return x.valid; });

        if (validstops.length == 1) {
            map.panTo(validstops[0].$marker.getPosition());
        } else if (validstops.length > 1) {
            var bounds = new google.maps.LatLngBounds();

            for (var i = 0; i < validstops.length; i++) {
                bounds.extend(validstops[i].$marker.getPosition());
            }

            map.fitBounds(bounds, 100);
        }


        if (validstops.length == $scope.stops.length) {
            var waypoints = [];
            if ($scope.stops.length > 2) {
                waypoints = $scope.stops.slice(1, $scope.stops.length - 2);
            }
            calculateAndDisplayRoute($scope.stops[0], $scope.stops[$scope.stops.length - 1], waypoints);
        }
    });


    //$scope.$watch('stops', function () {
    //  if (initializing) {
    //    $timeout(function() { initializing = false; });
    //  } else {
    //    if ($scope.stops[$scope.stops.length -1].Description != "Start typing to search...") {
    //      $scope.stops.forEach(function(stop, i){
    //          if (stop.Description != "Start typing to search...") {
    //            valid = true;
    //          } else {
    //            valid = false;
    //          }
    //      })
    //    } else {
    //      valid = false;
    //    }

    //    $scope.stops.forEach(function(stop, i){
    //      if (stop.Description != "Start typing to search..." && stop.changed == false) {
    //        if (i != 0 && i != $scope.stops.length-1) {
    //          drawMarker(stop.Latitude, stop.Longitude);
    //          waypoints.push({
    //            location: stop.Description,
    //            stopover: true
    //          });
    //        } else {
    //          drawMarker(stop.Latitude, stop.Longitude);
    //        }
    //      }
    //    })

    //    if (valid == true) {
    //      calculateAndDisplayRoute($scope.stops[0].Description, $scope.stops[$scope.stops.length - 1].Description);
    //    }
    //  }

    //}, true);

    function calculateAndDisplayRoute(start, end, waypoints) {
        directionsService.route({
            origin: start.$marker.getPosition(),
            destination: end.$marker.getPosition(),
            waypoints: waypoints.map(function (x) { return x.$marker.getPosition(); }),
            travelMode: 'DRIVING',
            provideRouteAlternatives: false
        }, function(response, status) {
            if (status === 'OK') {
                directionsDisplay.setDirections(response);
                directionsDisplay.setOptions({ suppressMarkers: true });

                var arrayOfPoints = response.routes[0].overview_path;
                var marker = new google.maps.Marker({
                    map: map,
                    position: arrayOfPoints[0]
                });

                var counter = 1;
                setInterval(function () {
                    marker.setPosition(arrayOfPoints[counter]);
                    counter++;
                }, 500);
            } else {
                console.log("Need more Stops", start, end, waypoints)
            }
        });
    }

    function clearMarkers() {
        markers = [];
    }

    function setMapOnAll(map) {
        for (var i = 0; i < markers.length; i++) {
            markers[i].setMap(map);
        }
    }

    function drawMarker(lat, lng) {
        return;
        var marker = new google.maps.Marker({
            position: {lat: lat, lng: lng},
            icon: '.././includes/images/c1.png',
            map: map,
        });
        markers.push(marker);
    }

    function initMap() {

        map = new google.maps.Map(document.getElementById('map-div'), {
            center: { lat: 51.491903, lng: -0.024640 },
            zoom: 10,
            mapTypeControl: false,
            styles: [{
                    "featureType": "all",
                    "elementType": "labels.text.fill",
                    "stylers": [{
                            "saturation": 36
                        },
                        {
                            "color": "#000000"
                        },
                        {
                            "lightness": 40
                        }
                    ]
                },
                {
                    "featureType": "all",
                    "elementType": "labels.text.stroke",
                    "stylers": [{
                            "visibility": "on"
                        },
                        {
                            "color": "#000000"
                        },
                        {
                            "lightness": 16
                        }
                    ]
                },
                {
                    "featureType": "all",
                    "elementType": "labels.icon",
                    "stylers": [{
                        "visibility": "off"
                    }]
                },
                {
                    "featureType": "administrative",
                    "elementType": "geometry.fill",
                    "stylers": [{
                            "color": "#000000"
                        },
                        {
                            "lightness": 20
                        }
                    ]
                },
                {
                    "featureType": "administrative",
                    "elementType": "geometry.stroke",
                    "stylers": [{
                            "color": "#000000"
                        },
                        {
                            "lightness": 17
                        },
                        {
                            "weight": 1.2
                        }
                    ]
                },
                {
                    "featureType": "landscape",
                    "elementType": "geometry",
                    "stylers": [{
                            "color": "#000000"
                        },
                        {
                            "lightness": 20
                        }
                    ]
                },
                {
                    "featureType": "poi",
                    "elementType": "geometry",
                    "stylers": [{
                            "color": "#000000"
                        },
                        {
                            "lightness": 21
                        }
                    ]
                },
                {
                    "featureType": "road.highway",
                    "elementType": "geometry.fill",
                    "stylers": [{
                            "color": "#000000"
                        },
                        {
                            "lightness": 17
                        }
                    ]
                },
                {
                    "featureType": "road.highway",
                    "elementType": "geometry.stroke",
                    "stylers": [{
                            "color": "#000000"
                        },
                        {
                            "lightness": 29
                        },
                        {
                            "weight": 0.2
                        }
                    ]
                },
                {
                    "featureType": "road.arterial",
                    "elementType": "geometry",
                    "stylers": [{
                            "color": "#000000"
                        },
                        {
                            "lightness": 18
                        }
                    ]
                },
                {
                    "featureType": "road.local",
                    "elementType": "geometry",
                    "stylers": [{
                            "color": "#000000"
                        },
                        {
                            "lightness": 16
                        }
                    ]
                },
                {
                    "featureType": "transit",
                    "elementType": "geometry",
                    "stylers": [{
                            "color": "#000000"
                        },
                        {
                            "lightness": 19
                        }
                    ]
                },
                {
                    "featureType": "water",
                    "elementType": "geometry",
                    "stylers": [{
                            "color": "#000000"
                        },
                        {
                            "lightness": 17
                        }
                    ]
                }
            ]
        });
        directionsDisplay.setMap(map);
        $rootScope.map = map;
    }
    });


// if (initializing) {
//   $timeout(function() { initializing = false; });
// } else {
//   $scope.stops.forEach(function(stop, i){
//     if (i != 0 && i != $scope.stops.length-1) {
//       directionsDisplay.set('directions', null);
//       if (stop.Description == "Start typing to search...") {
//         console.log("Typing not complete");
//       } else {
//         waypoints.push({
//           location: stop.Description,
//           stopover: true
//         });
//         calculateAndDisplayRoute($scope.stops[0].Description, $scope.stops[$scope.stops.length - 1].Description);
//       }
//
//
//
//     } else {
//       if (stop.Latitude != undefined && stop.Longitude != undefined) {
//           console.log(stop.Longitude);
//           console.log("Typing not complete");
//
//           drawMarker(stop.Latitude, stop.Longitude);
//
//           directionsDisplay.set('directions', null);
//
//           calculateAndDisplayRoute($scope.stops[0].Description, $scope.stops[$scope.stops.length - 1].Description);
//
//        }
//     }
//   })
// }