angular.module('focaModalLocalizar')
  .directive('osmDireccion', function () {
    return {
      restrict: 'E',
      link: function (scope, el, attrs) {
        var contenedor = document.createElement('div');
        el.append(contenedor);
        scope.map = L.map(contenedor).setView([-32.89214159952345, -68.84572999101856], attrs.zoom);
        L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(scope.map);
      },
      controller: ['$scope', '$timeout', function ($scope, $timeout) {
        //resuelve bug mapa gris en modales
        $timeout(function () {
          $scope.map.invalidateSize();
        }, 100);

        $scope.markers = [];
        $scope.$watchGroup(['latitud', 'longitud'], function () {
          for (var i in $scope.markers) {
            $scope.map.removeLayer($scope.markers[i]);
          }
          $scope.markers.push(
            L.marker([$scope.latitud, $scope.longitud], { draggable: true })
              .addTo($scope.map)
              .on('dragend', function () {
                $scope.latitud = this.getLatLng().lat;
                $scope.longitud = this.getLatLng().lng;
                $scope.$apply();
              })
          );
        });

        $scope.$on('moveMap', function (evt, data) {
          $scope.map.panTo(new L.LatLng(data.latitud, data.longitud));
        });
      }],
      scope: {
        latitud: '=',
        longitud: '=',
        zoom: '='
      }
    };
  });