import Ember from 'ember';

const { Component, RSVP } = Ember;

export default Component.extend({
  tagName: 'button',
  classNames: ['upf-btn', 'upf-btn--destructive'],

  clickedToDelete: false,
  actionFailed: false,

  click: function(e) {
    e.preventDefault();

    // Because `.send` method for sending actions does not return anything, we
    // pass it an `RSVP.defer` to be resolved in the remote action.
    let defer = RSVP.defer();
    defer.promise.then( () => {
      this.$().text(this.get('successMessage'));
    }, () => {
      this.set('clickedToDelete', false);
      this.set('actionFailed', true);
      this.$().html(
        `<i class='fa fa-refresh'></i> &nbsp; ${this.get('failureMessage')}`
      );
    });

    Ember.run.debounce(this, function() {
      if (this.get('clickedToDelete')) {
        this.set('clickedToDelete', false);
        this.set('actionFailed', false);
        this.get('countdown').abort();

        this.$().html(this.get('originalContent'));
      } else {
        this.set('clickedToDelete', true);
        this.set('originalContent', this.$().html());

        this.set('countdown', new Countdown(5, function(seconds) {
          this.$().text(`${this.get('ongoingMessage')} ( ${seconds} )...`);
        }.bind(this), function() {
          this.get('targetObject').send(
            this.get('destructiveAction'),
            this.get('record'),
            defer
          );
        }.bind(this)));
      }
    }, 100);
  }
});

@@ -1,8 +1,31 @@
+/* global Countdown */%0A
 import E
@@ -67,16 +67,37 @@
 nt, RSVP
+, TargetActionSupport
  %7D%C2%A0= Emb
@@ -133,16 +133,37 @@
 .extend(
+TargetActionSupport, 
 %7B%0A  tagN
@@ -1216,24 +1216,16 @@
 down(5, 
-function
 (seconds
@@ -1225,16 +1225,19 @@
 seconds)
+ =%3E
  %7B%0A     
@@ -1320,74 +1320,48 @@
    %7D
-.bind(this), function() %7B%0A          this.get('targetObject').send(
+, () =%3E %7B%0A          this.triggerAction(%7B
 %0A   
@@ -1360,32 +1360,40 @@
 on(%7B%0A           
+ action:
  this.get('destr
@@ -1412,32 +1412,48 @@
 '),%0A            
+actionContext: %5B
 this.get('record
@@ -1459,26 +1459,15 @@
 d'),
-%0A           
  defer
+%5D
 %0A   
@@ -1469,24 +1469,25 @@
 %5D%0A          
+%7D
 );%0A        %7D
@@ -1490,19 +1490,8 @@
    %7D
-.bind(this)
 ));%0A

Use TargetActionSupport