import Ember from 'ember';

import AmCharts from 'ammaps';

import ENV from 'app-client/config/environment';

import * as commonConstants from 'corpus-common-addon/utils/constants';

import * as commonUtils from 'corpus-common-addon/utils/utils';

export default Ember.Component.extend({

  constants: Ember.inject.service(),

  colors: Ember.inject.service(),

  filter: Ember.inject.service(),

  map: null,

  continentsMapVar: AmCharts.maps.continentsLow,

  continentsAreas: [],

  countriesMapVar: AmCharts.maps.worldLow,

  countriesAreas: [],

  franceMapVar: AmCharts.maps.france2016Low,

  franceAreas: [],

  dataProvider: {},

  colorScale: Ember.computed('maxCount', 'minCount', function () {

    let maxCount = this.get('maxCount');

    let minCount = this.get('minCount');

    return this.get('colors').getScaleLinear(minCount, maxCount);

  }),

  counts: Ember.computed.mapBy('geostats', 'count'),

  maxCount: Ember.computed.max('counts'),

  minCount: Ember.computed.min('counts'),

  area: null,

  originalZoomLevel: null,

  originalZoomLongitude: null,

  originalZoomLatitude: null,

  color: 'rgba(113,132,141,.2)',

  locationObserver: Ember.observer('filter.location', function () {

    if (this.get('filter').get('location') === null) {

      this.sendAction('setLocation', this.get('constants').GEONAMES['world']);

      this.get('map').selectObject();

    } else {

      this.sendAction('setLocation', commonUtils.getGeonamesCode(this.get('filter').get('location')));

    }

  }),

  geostats: [],

  observerGeostats: Ember.observer('geostats', function () {

    let map = this.get('map');

    if(!map) {

      return;

    }

    let selectedObject = map.selectedObject;

    if (selectedObject.id) {

      if (selectedObject.parentObject.mapVar === this.get('countriesMapVar')) {

        if (selectedObject.id === this.get('constants').GEONAMES['france']) {

          this.setProperties({

            area: 'france',

            originalZoomLevel: null,

            originalZoomLongitude: null,

            originalZoomLatitude: null,

          });

          this.setFranceAreas();

          this.set('dataProvider', {

            'mapVar': this.get('franceMapVar'),

            'getAreasFromMap': true,

            'areas': this.get('franceAreas')

          });

          map['zoomControl'] = {

            'zoomControlEnabled': false

          };

          map['dragMap'] = false;

          map['dataProvider'] = this.get('dataProvider');

          map.validateData();

        }

      } else if (selectedObject.parentObject.mapVar === this.get('continentsMapVar')) {

        this.setProperties({

          area: 'countries',

          originalZoomLevel: map.zoomLevel(),

          originalZoomLongitude: map.zoomLongitude(),

          originalZoomLatitude: map.zoomLatitude()

        });

        this.setCountriesAreas();

        this.set('dataProvider', {

          'mapVar': this.get('countriesMapVar'),

          'getAreasFromMap': true,

          'areas': this.get('countriesAreas'),

          'zoomLevel': map.zoomLevel(),

          'zoomLatitude': map.zoomLatitude(),

          'zoomLongitude': map.zoomLongitude()

        });

        map['dataProvider'] = this.get('dataProvider');

        map['zoomControl'] = {

          'zoomControlEnabled': true

        };

        map['dragMap'] = true;

        map.validateData();

      }

    } else {

      this.setProperties({

        area: 'continents',

        originalZoomLevel: null,

        originalZoomLongitude: null,

        originalZoomLatitude: null,

      });

      this.setContinentsAreas();

      this.set('dataProvider', {

        'mapVar': this.get('continentsMapVar'),

        'areas': this.get('continentsAreas')

      });

      map['zoomControl'] = {

        'zoomControlEnabled': false

      };

      map['dragMap'] = false;

      this.createAmMap();

    }

  }),

  init: function () {

    this._super(...arguments);

    if (ENV.environment === 'development') {

      this.set('color', '#f3f3f3');

    }

    this.get('service'); // gotcha cf: https://github.com/emberjs/ember.js/issues/10821

  },

  setFranceAreas: function () {

    var self = this;

    var france2016LowAreas = [];

    this.get('franceMapVar')['svg']['g']['path'].forEach(function (area) {

      var object = {

        'id': area.id,

        'passZoomValuesToTarget': false,

        'autoZoom': false

      };

      var departments = self.get('geostats').find(geostat => geostat.id === area.id);

      if (typeof departments === 'undefined') {

        object['mouseEnabled'] = false;

        object['color'] = self.get('color');

      } else {

        object['value'] = departments.get('count');

        object['title'] = area.title + " (" + departments.get('count') + ")";

      }

      france2016LowAreas.push(object);

    });

    this.set('franceAreas', france2016LowAreas);

  },

  setCountriesAreas: function () {

    var self = this;

    var worldLowAreas = [];

    this.get('countriesMapVar')['svg']['g']['path'].forEach(function (area) {

      var countries = self.get('geostats').find(geostat => geostat.id === area.id);

      if (typeof countries === 'undefined') {

        worldLowAreas.push({

          'id': area.id,

          'mouseEnabled': false,

          'color': self.get('color')

        });

      } else {

        if (typeof worldLowAreas.find(country => country.id === area.id) === 'undefined') {

          var object = {

            'id': area.id,

            'selectable': true,

            'value': countries.get('count'),

            'title': area.title + " (" + countries.get('count') + ")"

          };

          if (area.id === 'FR') {

            object['autoZoom'] = true;

          }

          worldLowAreas.push(object);

        }

      }

    });

    this.set('countriesAreas', worldLowAreas);

  },

  setContinentsAreas: function () {

    var self = this;

    var continentsLowAreas = [];

    this.get('continentsMapVar')['svg']['g']['path'].forEach(function (area) {

      var object = {

        'id': area.id,

        'passZoomValuesToTarget': true,

        'selectable': true,

        'mouseEnabled': true,

        'autoZoom': true

      };

      var continent = self.get('geostats').find(geostat => geostat.id === area.id);

      if (typeof continent === 'undefined') {

        object['mouseEnabled'] = false;

        object['color'] = self.get('color');

      } else {

        object['value'] = continent.get('count');

        object['title'] = area.title + " (" + continent.get('count') + ")";

      }

      continentsLowAreas.push(object);

    });

    this.set('continentsAreas', continentsLowAreas);

  },

  didInsertElement: function () {

    this.$('#mapdiv').height(Ember.$('.corpus-app-container').height());

    this.createAmMap();

  },

  createAmMap: function () {

    this.setContinentsAreas();

    this.set('dataProvider', {

      'mapVar': this.get('continentsMapVar'),

      'areas': this.get('continentsAreas')

    });

    this.set('map', AmCharts.makeChart('mapdiv', {

      'type': 'map',

      'accessible': true,

      'fontFamily': 'sans-serif',

      'fontSize': '12px',

      'dragMap': false,

      'zoomOnDoubleClick': false,

      'language': 'fr',

      'areasSettings': {

        'autoZoom': false,

        'selectable': true,

        'color': this.get('colors').LINEAR_COLOR_START,

        'colorSolid': this.get('colors').LINEAR_COLOR_END,

        'colorOutline': '#253946',

        'selectedColor': '#0085cb',

        'rollOverColor': '#0085cb',

        'rollOverOutlineColor': '#ffffff'

      },

      'zoomControl': {

        'zoomControlEnabled': false,

      },

      'dataProvider': this.get('dataProvider'),

      listeners: [{

        'event': 'clickMapObject',

        'method': Ember.run.bind(this, 'clickMapObject')

      }, {

        'event': 'homeButtonClicked',

        'method': Ember.run.bind(this, 'homeButtonClicked')

      }]

    }));

  },

  clickMapObject: function (event) {

    const changed = this.get('filter').setFilter('location', commonConstants.GEONAMES_BASE_URL + event.mapObject.id);

    if(!changed) {

      //force filter change

      this.notifyPropertyChange('filter.location');

    }

  },

  homeButtonClicked: function () {

    const map = this.get('map');

    const { area, originalZoomLevel, originalZoomLongitude, originalZoomLatitude } =

      this.getProperties('area', 'originalZoomLevel', 'originalZoomLongitude', 'originalZoomLatitude');

    if(area === 'countries' && (

      (originalZoomLevel && originalZoomLevel !== map.zoomLevel()) ||

      (originalZoomLatitude && originalZoomLatitude !== map.zoomLatitude()) ||

      (originalZoomLongitude && originalZoomLongitude !== map.zoomLongitude())

    )) {

      // in mode countries, the map has been moved or zoomed, just reset the view

      return;

    }

    this.get('filter').removeFilter('location', null);

    this.sendAction('setLocation', this.get('constants').GEONAMES['world']);

  }

});