/**
  @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,
  calledByAreaSelect: false,
  /**
    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.calledByAreaSelect = true;
             this.set('minLgt', bounds.getWest());

             this.calledByAreaSelect = true;
             this.set('maxLgt', bounds.getEast());

             this.calledByAreaSelect = true;
             this.set('minLat', bounds.getSouth());

             this.calledByAreaSelect = true;
             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];
           this.set('minLat', minLat);
           this.set('maxLat', maxLat);
         }
         if(minLat<-90){
           minLat = -90;
           this.set('minLat', minLat);
         }
         if(maxLat>90){
           maxLat = 90;
           this.set('maxLat', maxLat);
         }

         if(this.calledByAreaSelect === true){
           this.calledByAreaSelect = false;
           return;
         }
         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];
            this.set('minLgt', minLgt);
            this.set('maxLgt', maxLgt);
          }
          if(minLgt < -90){
            minLgt = -90;
            this.set('minLgt', minLgt);
          }
          if(maxLgt > 90){
            maxLgt = 90;
            this.set('maxLgt', maxLgt);
          }
          if(this.calledByAreaSelect === true){
            this.calledByAreaSelect = false;
            return;
          }
          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: {
  },
});