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(),

    map: null,

    continentsMapVar: AmCharts.maps.continentsLow,
    continentsAreas: [],
    countriesMapVar: AmCharts.maps.worldLow,
    countriesAreas: [],
    franceMapVar: AmCharts.maps.france2016Low,
    franceAreas: [],

    dataProvider: {},

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

    filter: Ember.inject.service(),
    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() {
        if(this.get('map')) {
            if(this.get('map').selectedObject.id) {
                if(this.get('map').selectedObject.parentObject.mapVar === this.get('countriesMapVar')) {
                    if(this.get('map').selectedObject.id === this.get('constants').GEONAMES['france']) {
                        this.setFranceAreas();
                        this.set('dataProvider', {
                            'mapVar': this.get('franceMapVar'),
                            'getAreasFromMap': true,
                            'areas': this.get('franceAreas')
                        });
                        this.get('map')['dataProvider'] = this.get('dataProvider');
                        this.get('map').validateData();
                    }
                } else if(this.get('map').selectedObject.parentObject.mapVar === this.get('continentsMapVar')) {
                    this.setCountriesAreas();
                    this.set('dataProvider', {
                        'mapVar': this.get('countriesMapVar'),
                        'getAreasFromMap': true,
                        'areas': this.get('countriesAreas'),
                        'zoomLevel': this.get('map').zoomLevel(),
                        'zoomLatitude': this.get('map').zoomLatitude(),
                        'zoomLongitude': this.get('map').zoomLongitude()
                    });
                    this.get('map')['dataProvider'] = this.get('dataProvider');
                    this.get('map').validateData();
                }
            } else {
                this.setContinentsAreas();
                this.set('dataProvider', {
                    'mapVar': this.get('continentsMapVar'),
                    'areas': this.get('continentsAreas')
                });
                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',
            'fontFamily': 'sans-serif',
            'fontSize': '12px',
            'dragMap': false,
            'zoomOnDoubleClick': false,
            'language': 'fr',
            'areasSettings': {
                'autoZoom': false,
                'selectable': true,
                'color': '#777777',
                'colorSolid': '#333333',
                '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) {
        this.get('filter').setFilter('location', commonConstants.GEONAMES_BASE_URL + event.mapObject.id);
    },

    homeButtonClicked: function() {
        this.get('filter').removeFilter('location', null);
        this.sendAction('setLocation', this.get('constants').GEONAMES['world']);
    }

});