import Ember from 'ember';
import { setDefaultHighChartOptions } from '../utils/option-loader';

const {
  computed,
  get,
  set,
  merge,
  on,
  observer,
  run
} = Ember;

export default Ember.Component.extend({
  classNames: ['highcharts-wrapper'],
  content: undefined,
  mode:    undefined,
  chartOptions: undefined,
  chart: null,
  theme: undefined,
  callback: undefined,

  buildOptions: computed('chartOptions', 'content.@each.isLoaded', function() {
    let chartOptions = Ember.$.extend(true, {}, get(this, 'theme'), get(this, 'chartOptions'));
    let chartContent = get(this, 'content.length') ? get(this, 'content') : [{
      id    : 'noData',
      data  : 0,
      color : '#aaaaaa'
    }];

    let defaults = { series: chartContent };

    return merge(defaults, chartOptions);
  }),

  contentDidChange: observer('content.@each.isLoaded', function() {
    if (!(get(this, 'content') && get(this, 'chart'))) {
      return;
    }

    let chart  = get(this, 'chart');
    let noData = chart.get('noData');

    if (noData != null) {
      noData.remove();
    }

    return get(this, 'content').forEach((series, idx) => {
      if (chart.series[idx]) {
        return chart.series[idx].setData(series.data);
      } else {
        return chart.addSeries(series);
      }
    });
  }),

  drawAfterRender() {
    run.scheduleOnce('afterRender', this, 'draw');
  },

  draw() {
    let completeChartOptions = [ get(this, 'buildOptions'), get(this, 'callback') ];
    let mode  = get(this, 'mode');

    if (typeof mode === 'string' && !!mode) {
      completeChartOptions.unshift(mode);
    }

    let $element = this.$();
    if ($element) {
      let chart    = $element.highcharts.apply($element, completeChartOptions).highcharts();
      set(this, 'chart', chart);
    }
  },

  _renderChart: on('didInsertElement', function() {
    this.drawAfterRender();
    setDefaultHighChartOptions(this.container);
  }),

  _destroyChart: on('willDestroyElement', function() {
    this._super();
    if (get(this, 'chart')) {
      get(this, 'chart').destroy();  
    }
  })
});

@@ -98,16 +98,29 @@
 const %7B%0A
+  Component,%0A
   comput
@@ -158,23 +158,16 @@
 ,%0A  
-observer
+run
 ,%0A  
-run
+$
 %0A%7D =
@@ -190,22 +190,16 @@
 default 
-Ember.
 Componen
@@ -276,19 +276,16 @@
 %0A  mode:
-   
  undefin
@@ -420,38 +420,26 @@
 ', 'content.
-@each.isLoaded
+%5B%5D
 ', function(
@@ -469,14 +469,8 @@
 s = 
-Ember.
 $.ex
@@ -619,20 +619,16 @@
       id
-    
 : 'noDat
@@ -641,18 +641,16 @@
     data
-  
 : 0,%0A   
@@ -657,17 +657,16 @@
    color
- 
 : '#aaaa
@@ -779,73 +779,59 @@
 %0A%0A  
-contentDidChange: observer('content.@each.isLoaded', function() %7B
+didReceiveAttrs() %7B%0A    this._super(...arguments);%0A
 %0A   
@@ -919,17 +919,16 @@
 t chart 
- 
 = get(th
@@ -1251,25 +1251,24 @@
 %0A    %7D);%0A  %7D
-)
 ,%0A%0A  drawAft
@@ -1629,19 +1629,16 @@
 t chart 
-   
 = $eleme
@@ -1942,27 +1942,8 @@
 ) %7B%0A
-    this._super();%0A
     
@@ -2003,18 +2003,16 @@
 stroy();
-  
 %0A    %7D%0A 

Remove observer in favor of didReceiveAttrs