import { ReactiveCache } from '/imports/reactiveCache';

const commentFormIsOpen = new ReactiveVar(false);

Template.commentForm.onDestroyed(function () {
  commentFormIsOpen.set(false);
  $('.note-popover').hide();
});

Template.commentForm.helpers({
  commentFormIsOpen() {
    return commentFormIsOpen.get();
  },
});

Template.commentForm.events({
  'submit .js-new-comment-form'(evt, tpl) {
    const input = tpl.$('.js-new-comment-input');
    const text = input.val().trim();
    const card = Template.currentData();
    let boardId = card.boardId;
    let cardId = card._id;
    if (card.isLinkedCard()) {
      boardId = ReactiveCache.getCard(card.linkedId).boardId;
      cardId = card.linkedId;
    } else if (card.isLinkedBoard()) {
      boardId = card.linkedId;
    }
    if (text) {
      CardComments.insert({
        text,
        boardId,
        cardId,
      });
      resetCommentInput(input);
      Tracker.flush();
      autosize.update(input);
      input.trigger('submitted');
    }
    evt.preventDefault();
  },
  // Pressing Ctrl+Enter should submit the form
  'keydown form textarea'(evt, tpl) {
    if (evt.keyCode === 13 && (evt.metaKey || evt.ctrlKey)) {
      tpl.find('button[type=submit]').click();
    }
  },
});

Template.comments.helpers({
  getComments() {
    const data = Template.currentData();
    if (!data || typeof data.comments !== 'function') return [];
    return data.comments();
  },
});

Template.comment.events({
  'click .js-delete-comment': Popup.afterConfirm('deleteComment', function () {
    const commentId = this._id;
    CardComments.remove(commentId);
    Popup.back();
  }),
  'submit .js-edit-comment'(evt, tpl) {
    evt.preventDefault();
    const textarea = tpl.find('.js-edit-comment textarea,input[type=text]');
    const commentText = textarea && textarea.value ? textarea.value.trim() : '';
    const commentId = this._id;
    if (commentText) {
      CardComments.update(commentId, {
        $set: {
          text: commentText,
        },
      });
    }
  },
});

// XXX This should be a static method of the `commentForm` component
function resetCommentInput(input) {
  input.val(''); // without manually trigger, input event won't be fired
  input.blur();
  commentFormIsOpen.set(false);
}

// XXX This should handled a `onUpdated` callback of the `commentForm` component
// but since this callback doesn't exists, and `onRendered` is not called if the
// data is not destroyed and recreated, we simulate the desired callback using
// Tracker.autorun to register the component dependencies, and re-run when these
// dependencies are invalidated. A better component API would remove this hack.
Tracker.autorun(() => {
  Utils.getCurrentCardId();
  Tracker.afterFlush(() => {
    autosize.update($('.js-new-comment-input'));
  });
});

EscapeActions.register(
  'inlinedForm',
  () => {
    const draftKey = {
      fieldName: 'cardComment',
      docId: Utils.getCurrentCardId(),
    };
    const commentInput = $('.js-new-comment-input');
    const draft = commentInput.val().trim();
    if (draft) {
      UnsavedEdits.set(draftKey, draft);
    } else {
      UnsavedEdits.reset(draftKey);
    }
    resetCommentInput(commentInput);
  },
  () => {
    return commentFormIsOpen.get();
  },
  {
    noClickEscapeOn: '.js-new-comment',
  },
);