package demo.crm;

@Accessible
@View(
   name="map", 
   control="/demo/custom/mapView", 
   expand="address", 
   settings={"lat:address.lat","lng:address.lng","label:name", "marker:photo"}
)
public class Customer extends JelloEntity {   
   @KeyElement @Expose
   public String name;
   
   @Expose
   public Ref<Address> address;
   
   @Expose @Attachment(accept="image/*")
   public String photo;
}

@Accessible
public class Address extends JelloEntity {
   @Expose @KeyElement
   public String street;

   @Expose @KeyElement
   public String city;

   @Expose @KeyElement
   public String state;

   @Expose @KeyElement
   public String zipCode;

   @Expose @KeyElement
   public String country;
   
   @Expose @ReadOnly
   public Double lat;
   
   @Expose @ReadOnly
   public Double lng;

   private String fullAddress() {
      return street + ", " + city + ", " + state + zipCode + ", " + country;
   }
   
   @Override
   protected JelloEntity beforeSave() throws IllegalRequestResource {
      String url = "https://maps.googleapis.com/maps/api/geocode/json?address=";
      url += fullAddress().replaceAll(" ", "+");
      url += "&key=<your-google-api-private-key>";
      JsonHelper response = Util.fetchJson( url );
      
      String status = (String) response.getValue("status");
      if(status != null && status.equals("OK")) {
         lat = (Double) response.getValue("results[0].geometry.location.lat");
         lng = (Double) response.getValue("results[0].geometry.location.lng");
      }   
      return this;
   }
}

function MapView( containerId, data, settings ) {

   this.container =  $('#' + containerId);
   this.settings = settings;
   var that = this;
   
   this.container.append( $('<div id="map" style="height:100%;"></div>') );

   var markers = {};
   var map;
   
   requirejs(["https://maps.googleapis.com/maps/api/js"],  initMap);
   
   function initMap() {        
      setData(data);
   }
       
   function setData(results) {           
        var bb = boundingBbox(results);
      
      map = new google.maps.Map(document.getElementById('map'), {
         center: bb.center
      });
      map.fitBounds(bb.bounds);
        
        for(var i in results) {
           var r = results[i];
           var pos = {lat: $JELLO.getValue(r, settings.lat), lng: $JELLO.getValue(r, settings.lng)};
           
             var image = {
                url: r.__metadata.uri + "/" + settings.marker + "/$value",
                scaledSize: new google.maps.Size(46, 46),
            anchor: new google.maps.Point(23, 90)
           };
             
             var iconMask = {
                url: "/apis/v-1.2.8/assets/images/map/map_icon_mask.png",
                scaledSize: new google.maps.Size(75, 106)
             }
           
         var markerMask = new google.maps.Marker({
            position: pos,
            map: map,
            icon: iconMask,
              zIndex: 2*i+1
         });
             
         var marker = new google.maps.Marker({
            position: pos,
            map: map,
            icon: image,
              title: $JELLO.getValue(r, settings.label),
              zIndex: 2*i
         });
         
         markers[r.__metadata.uri] = marker;
         
         var contentString = 
            '<div id="content"><iframe src="'+r.__metadata.uri.replace("/data/", "/view/") +
            "?$embeddedRecordDetail=true" +
            '" width="420" height="510" style="overflow:hidden"></iframe></div>';
         
         var infowindow = new google.maps.InfoWindow({
            content: contentString
         });
         
         markerMask.addListener('click', (function() {
            var m = markerMask;
            var infoW = infowindow;
            return function() {
               infoW.open(map, m);
            };
         })());
        }      
   }
   
   function boundingBbox(results) {
      var minLat = 1000;
      var minLng = 1000;
      var maxLat = -1000;
      var maxLng = -1000;
      for(var i in results) {
         var lat = $JELLO.getValue(results[i], settings.lat);
         var lng = $JELLO.getValue(results[i], settings.lng);
         if(lat > maxLat)
            maxLat = lat;
         if(lng > maxLng)
            maxLng = lng;
         if(lat < minLat)
            minLat = lat;
         if(lng < minLng)
            minLng = lng;   
      }
      
      var center = {lat: (maxLat+minLat)/2, lng: (maxLng+minLng)/2};
      var southWest = new google.maps.LatLng(minLat - 0.2*(maxLat-minLat) ,minLng - 0.2*(maxLng-minLng));
      var northEast = new google.maps.LatLng(maxLat + 0.2*(maxLat-minLat), maxLng + 0.2*(maxLng-minLng));
      var bounds = new google.maps.LatLngBounds(southWest,northEast);
              
      return {center:center, bounds:bounds}; 
   }
}