import Ember from 'ember';

export default Ember.Component.extend({    
    itemToDelete: null,
    
    hasItemToDelete: Ember.computed('itemToDelete', function(){
       return this.get('itemToDelete') != null; 
    }),
    
    _closeConfirmationDialog: function() {
      this.set('itemToDelete', null);
    },
    
    items: [
      {id: 1, name: 'first item'},
      {id: 2, name: 'second item'},
      {id: 3, name: 'third item'},
      {id: 4, name: 'fourth item'},
      {id: 5, name: 'fifth item'}
    ],

    actions: {
      removeItem: function(item) {
          this.set('itemToDelete', item);
      },
      
      /**
       * DO NOT CALL THIS METHOD DIRECTLY
       * BUT ALWAYS VIA CONFIRMATION DIALOG
       */
      doRemoveItem: function() {
          const itemToDelete = this.get('itemToDelete');
          
          if (!itemToDelete){
              return;
          }
          
          // normally you would call something like itemToDelete.destroyRecord()
          // but this just a simplified example ....
          this
      },
     }
});