with observers

/**
  @module ember-flexberry-gis
*/

import Ember from 'ember';
import layout from '../templates/components/flexberry-boundingbox';
import FlexberryMapActionsHandlerMixin from '../mixins/flexberry-map-actions-handler';



export default Ember.Component.extend(
  FlexberryMapActionsHandlerMixin, {
  /**
    Reference to component's template.
  */
  layout,
  /**
    Leaflet map.
    @property leafletMap
    @type <a href="http://leafletjs.com/reference-1.0.0.html#map">L.Map</a>
    @default null
  */
  leafletMap: null,

  /**
    Observes changes in reference to leaflet map.
    Initializes area select plugin.
    @method _leafletMapDidChange
    @private
  */
    _leafletMapDidChange: Ember.on('init', Ember.observer('leafletMap', function() {
      let leafletMap = this.get('leafletMap');
      if (!Ember.isNone(leafletMap)) {
         let areaSelect = L.areaSelect({width:100, height:100});
         areaSelect.addTo(leafletMap);
         this.set('areaSelect', areaSelect);
         areaSelect.on("change", () => {
             let bounds = areaSelect.getBounds();
             this.set('minLgt', bounds.getWest());
             this.set('maxLgt', bounds.getEast());
             this.set('minLat', bounds.getSouth());
             this.set('maxLat', bounds.getNorth());
             console.log("сработал ареаселект чендж");
             return bounds;
         });
       }
   })),

     _latDidChange: Ember.observer('minLat', 'maxLat', function () {
       //Ember.run.once(this, function(){
         let minLat = Number(this.get('minLat'));
         let maxLat = Number(this.get('maxLat'));
         if(minLat>maxLat){
           [minLat, maxLat] = [maxLat, minLat];
         }
         if(minLat<-90){
           minLat = -90;
         }
         if(maxLat>90){
           maxLat = 90;
         }
         this.set('minLat', minLat);
         this.set('maxLat', maxLat);

         let leafletMap = this.get('leafletMap');
         let areaSelect = this.get('areaSelect');
         let maxLgt = Number(this.get('maxLgt')),
             minLgt = Number(this.get('minLgt'));
         let coords = L.latLng((maxLat+minLat)/2, (maxLgt+minLgt)/2);
         leafletMap.panTo(coords);
         leafletMap.fitBounds(L.latLngBounds(L.latLng(minLat, minLgt),L.latLng(maxLat, maxLgt)));
         let newWidth = Math.abs(leafletMap.latLngToLayerPoint(L.latLng(minLat, maxLgt)).x) - Math.abs(leafletMap.latLngToLayerPoint(L.latLng(minLat, minLgt)).x);
         let newHeight = Math.abs(leafletMap.latLngToLayerPoint(L.latLng(maxLat, minLgt)).y) - Math.abs(leafletMap.latLngToLayerPoint(L.latLng(minLat, minLgt)).y);
         newWidth = Math.abs(newWidth);
         newHeight = Math.abs(newHeight);
         console.log("w: ", newWidth,"h: ", newHeight);
         areaSelect.setDimensions({width:newWidth, height:newHeight});
       //});
     }),

     _lgtDidChange: Ember.observer('minLgt', 'maxLgt', function () {
       //Ember.run.once(this, function(){

          let minLgt = Number(this.get('minLgt'));
          let maxLgt = Number(this.get('maxLgt'));
          if(minLgt>maxLgt){
            [minLgt, maxLgt] = [maxLgt, minLgt];
          }
          if(minLgt<-90){
            minLgt = -90;
          }
          if(maxLgt>90){
            maxLgt = 90;
          }
          this.set('minLgt', minLgt);
          this.set('maxLgt', maxLgt);

          let leafletMap = this.get('leafletMap');
          let areaSelect = this.get('areaSelect');
          let maxLat = Number(this.get('maxLat')),
              minLat = Number(this.get('minLat'));
          let coords = L.latLng((maxLat+minLat)/2, (maxLgt+minLgt)/2);
          leafletMap.panTo(coords);
          leafletMap.fitBounds(L.latLngBounds(L.latLng(minLat, minLgt),L.latLng(maxLat, maxLgt)));
          let newWidth = Math.abs(leafletMap.latLngToLayerPoint(L.latLng(minLat, maxLgt)).x) - Math.abs(leafletMap.latLngToLayerPoint(L.latLng(minLat, minLgt)).x);
          let newHeight = Math.abs(leafletMap.latLngToLayerPoint(L.latLng(maxLat, minLgt)).y) - Math.abs(leafletMap.latLngToLayerPoint(L.latLng(minLat, minLgt)).y);
          newWidth = Math.abs(newWidth);
          newHeight = Math.abs(newHeight);
          console.log("w: ", newWidth,"h: ", newHeight);
          areaSelect.setDimensions({width:newWidth, height:newHeight});
      //  });
      }),



  actions: {
  },
});