/* eslint ember/closure-actions: 0 */

import { A } from '@ember/array';
import Component from '@ember/component';
import { run } from '@ember/runloop';
import { isEmpty } from '@ember/utils';
import { observer, computed } from '@ember/object';
import Ember from 'ember';
import noUiSlider from 'noUiSlider';

const {
  Logger: { warn }
} = Ember;

export default Component.extend({
  attributeBindings: ['disabledOrUndefined:disabled'],
  slider:       null,
  start:        undefined,
  step:         undefined,
  margin:       undefined,
  limit:        undefined,
  pips:         undefined,
  animate:      true,
  snap:         false,
  connect:      false,
  disabled:     false,
  orientation:  'horizontal',
  direction:    'ltr',
  behaviour:    'tap',
  tooltips:     false,
  multitouch:   false,

  min: 0,
  max: 100,

  range: computed('min', 'max', function() {
    return {
      min: this.get('min'),
      max: this.get('max')
    };
  }),

  formatTo(value) {
    return value;
  },

  formatFrom(value) {
    return +value;
  },

  format: computed('formatTo', 'formatFrom', function() {
    return {
      to: this.get('formatTo'),
      from: this.get('formatFrom')
    };
  }),

  didInsertElement() {
    this.setup();
  },

  setup() {
    let element = this.get('element');
    let { noUiSlider: slider } = element;
    let properties = this.getProperties(
      'start', 'step', 'margin',
      'limit', 'range', 'connect',
      'orientation', 'direction',
      'behaviour', 'animate', 'snap',
      'pips', 'format', 'tooltips',
      'multitouch', 'cssPrefix', 'cssClasses'
    );
    let sliderEvents = A(['change', 'set', 'slide', 'update', 'start', 'end']);

    // We first check if the element has a slider already created
    if (slider && slider.destroy) {
      slider.destroy();
    }

    try {
      slider = noUiSlider.create(element, properties, true);
    } catch (err) {
      warn(`[ember-cli-nouislider]: ${err}`);
    }

    this.slider = slider;

    sliderEvents.forEach(event => {
      if (!isEmpty(this.get(`on-${event}`))) {
        slider.on(event, () => {
          run(this, function() {
            let val = this.get("slider").get();
            this.sendAction(`on-${event}`, val);
          });
        });
      }
    });
  },

  didUpdateAttrs() {
    this.update();
  },

  update() {
    let { slider } = this;
    let properties = this.getProperties(
      'margin', 'limit', 'step',
      'range', 'animate', 'snap',
      'start'
    );

    if (slider) {
      slider.updateOptions(properties);
    }
  },

  willDestroyElement() {
    this.teardown();
  },

  teardown() {
    let { slider } = this;

    // Remove all event listeners
    slider.off();

    slider.destroy();
  },

  setValue: observer('start', function() {
    let { slider } = this;

    if (slider) {
      let value = this.get('start');
      slider.set(value);
    }
  }),

  // disabled can't be just `false` - this leads to an attribute of disabled="false"
  disabledOrUndefined: computed('disabled', function() {
    if (this.get('disabled')) {
      return true;
    }
    return undefined;
  })
});

@@ -2022,24 +2022,70 @@
 (event =%3E %7B%0A
+      const eventActionName = %60on-$%7Bevent%7D%60;%0A%0A
       if (!i
@@ -2100,29 +2100,31 @@
 his.get(
-%60on-$%7Bevent%7D%60
+eventActionName
 ))) %7B%0A  
@@ -2195,26 +2195,28 @@
             
-le
+cons
 t val = this
@@ -2224,16 +2224,16 @@
 get(
-%22
+'
 slider
-%22
+'
 ).ge
@@ -2253,44 +2253,346 @@
     
-this.sendAction(%60on-$%7Bevent%7D%60, val);
+const action = this.get(eventActionName);%0A%0A            if (typeof(action) === 'string') %7B%0A              // Note that %60sendAction%60 is deprecated and this will trigger a deprecation message.%0A              this.sendAction(eventActionName, val);%0A            %7D else if (typeof(action) === 'function') %7B%0A              action(val);%0A            %7D
 %0A   

support closure action because sendAction is deprecated