const MarkdownIt = require("markdown-it");
const md = new MarkdownIt({html: true});

var template = `
<div class="comment-editor" v-cloak>
<form novalidate>
    <textarea name="markdown" rows="3" v-model="comment.text" :placeholder="trans('entities.comment_placeholder')"></textarea>
    <input type="hidden" v-model="comment.pageId" name="comment.pageId" :value="pageId">
    <button type="button" v-if="isReply || isEdit" class="button muted" v-on:click="closeBox">{{ trans('entities.comment_cancel') }}</button>
    <button type="submit" class="button pos" v-on:click.prevent="saveComment">{{ trans('entities.comment_save') }}</button>
</form>
</div>
`;

const props = {
  pageId: {},
  commentObj: {},
  isReply: {
    default: false,
    type: Boolean
  }, isEdit: {
    default: false,
    type: Boolean
  }};

function data () {
  var comment = null;
  // initialize comment if not passed.
  if (!this.commentObj || this.isReply) {
    comment = {
      text: ''
    };

    if (this.isReply) {
      comment.page_id = this.commentObj.page_id;
      comment.id = this.commentObj.id;
    }
  } else {
    comment = this.commentObj;
  }

  return {
    trans: trans,
    parentId: null,
    comment: comment
  };
}

const methods = {
  saveComment: function (event) {
    let pageId = this.comment.page_id || this.pageId;
    let commentText = this.comment.text;
    if (!commentText) {
        return this.$emit('evt.empty-comment');
    }
    let commentHTML = md.render(commentText);
    let serviceUrl = `/ajax/page/${pageId}/comment/`;
    let httpMethod = 'post';
    let reqObj = {
        text: commentText,
        html: commentHTML
    };

    if (this.isEdit === true) {
        // this will be set when editing the comment.
        serviceUrl = `/ajax/page/${pageId}/comment/${this.comment.id}`;
        httpMethod = 'put';
    } else if (this.isReply === true) {
        // if its reply, get the parent comment id
        reqObj.parent_id = this.comment.id;
    }

    $http[httpMethod](window.baseUrl(serviceUrl), reqObj).then(resp => {
        if (!isCommentOpSuccess(resp)) {
             return;
        }
        // hide the comments first, and then retrigger the refresh
        if (this.isEdit) {
            this.$emit('comment-edited', event, resp.data.comment);
        } else {
            this.comment.text = '';
            this.$emit('comment-added', event);
            if (this.isReply === true) {
              this.$emit('comment-replied', event, resp.data.comment);
            } else {
              this.$parent.$emit('new-comment', event, resp.data.comment);
            }
            this.$emit('evt.comment-success', null, true);
        }

    }, checkError);
  },
  closeBox: function (event) {
    this.$emit('editor-removed', event);
  }
};

const computed = {};

function isCommentOpSuccess(resp) {
  if (resp && resp.data && resp.data.status === 'success') {
      return true;
  }
  return false;
}

function checkError(msgKey) {
  return function(response) {
    let msg = null;
    if (isCommentOpSuccess(response)) {
        // all good
        return;
    } else if (response.data) {
        msg = response.data.message;
    } else {
        msg = trans(msgKey);
    }
    if (msg) {
        events.emit('success', msg);
    }
  }
}

module.exports = {name: 'comment-reply', template, data, props, methods, computed};