BlazeComponent.extendComponent({
  template: function() {
    return 'cardDetails';
  },

  mixins: function() {
    return [Mixins.InfiniteScrolling, Mixins.PerfectScrollbar];
  },

  calculateNextPeak: function() {
    var altitude = this.find('.js-card-details').scrollHeight;
    this.callFirstWith(this, 'setNextPeak', altitude);
  },

  reachNextPeak: function() {
    var activitiesComponent = this.componentChildren('activities')[0];
    activitiesComponent.loadNextPage();
  },

  onRendered: function() {
    var bodyBoardComponent = this.componentParent();
    var additionalMargin = 550;
    var $cardDetails = this.$(this.firstNode());
    var scollLeft = $cardDetails.offset().left + additionalMargin;
    bodyBoardComponent.scrollLeft(scollLeft);
  },

  onDestroyed: function() {
    this.componentParent().showOverlay.set(false);
  },

  updateCard: function(modifier) {
    Cards.update(this.data()._id, {
      $set: modifier
    });
  },

  onCreated: function() {
    this.isLoaded = new ReactiveVar(false);
  },

  events: function() {
    // XXX We can't define this event directly in the event map below because we
    // miss ES6 object keys interpolation.
    var events = {};
    events[CSSEvents.animationend + ' .js-card-details'] = function() {
      this.isLoaded.set(true);
    };

    return [_.extend(events, {
      'click .js-close-card-details': function() {
        Utils.goBoardId(this.data().boardId);
      },
      'click .js-move-card': Popup.open('moveCard'),
      'click .js-open-card-details-menu': Popup.open('cardDetailsActions'),
      'submit .js-card-description': function(evt) {
        evt.preventDefault();
        var description = this.currentComponent().getValue();
        this.updateCard({ description: description });
      },
      'submit .js-card-details-title': function(evt) {
        evt.preventDefault();
        var title = this.currentComponent().getValue();
        if ($.trim(title)) {
          this.updateCard({ title: title });
        }
      },
      'click .js-member': Popup.open('cardMember'),
      'click .js-add-members': Popup.open('cardMembers'),
      'click .js-add-labels': Popup.open('cardLabels'),
      'mouseenter .js-card-details': function() {
        this.componentParent().showOverlay.set(true);
      }
    })];
  }
}).register('cardDetails');

Template.cardDetailsActionsPopup.events({
  'click .js-members': Popup.open('cardMembers'),
  'click .js-labels': Popup.open('cardLabels'),
  'click .js-attachments': Popup.open('cardAttachments'),
  // 'click .js-copy': Popup.open(),
  'click .js-archive': function(evt) {
    evt.preventDefault();
    Cards.update(this._id, {
      $set: {
        archived: true
      }
    });
    Popup.close();
  },
  'click .js-more': Popup.open('cardMore')
});

Template.moveCardPopup.events({
  'click .js-select-list': function() {
    // XXX We should *not* get the currentCard from the global state, but
    // instead from a “component” state.
    var cardId = Session.get('currentCard');
    var newListId = this._id;
    Cards.update(cardId, {
      $set: {
        listId: newListId
      }
    });
    Popup.close();
  }
});

Template.cardMorePopup.events({
  'click .js-delete': Popup.afterConfirm('cardDelete', function() {
    Popup.close();
    Cards.remove(this._id);
    Utils.goBoardId(this.board()._id);
  })
});

// Close the card details pane by pressing escape
EscapeActions.register('detailsPane',
  function() { Utils.goBoardId(Session.get('currentBoard')); },
  function() { return ! Session.equals('currentCard', null); }, {
    noClickEscapeOn: '.js-card-details'
  }
);