var $$ = React.createElement;
var TextProperty = require("substance/writer").TextProperty;

// Remark
// ----------------

var Remark = React.createClass({
  displayName: "Remark",

  handleToggle: function(e) {
    var writerCtrl = this.props.writerCtrl;
    var remarkId = this.props.remark.id;

    e.preventDefault();

    if (writerCtrl.state.remarkId === remarkId) {
      writerCtrl.replaceState({
        contextId: "remarks"
      });
    } else {
      writerCtrl.replaceState({
        contextId: "remarks",
        remarkId: remarkId
      });
    }
  },

  componentDidMount: function() {
    this.props.writerCtrl.doc.connect(this, {
      'document:changed': this.handleDocumentChange
    });
  },

  componentWillUnmount: function() {
    this.props.writerCtrl.doc.disconnect(this);
  },

  handleDocumentChange: function(change, info) {
    // TODO: is there a way to check if a doc update actually affects the remark annotation?
    // This is currently done way to often
    if (change.isAffected([this.props.remark.id, "content"])) {
      this.forceUpdate();
    }
  },

  handleDelete: function(e) {
    e.preventDefault();
    var writerCtrl = this.props.writerCtrl;
    var doc = this.props.writerCtrl.doc;
    var tx = doc.startTransaction();

    try {
      tx.delete(this.props.remark.id);
      tx.save();
      writerCtrl.replaceState({
        contextId: "remarks"
      });
    } finally {
      tx.cleanup();
    }
  },

  render: function() {
    var className = ["remark", this.props.type];
    if (this.props.active) className.push("active");

    var doc = this.props.writerCtrl.doc;
    var remarkSel = this.props.remark.getSelection();
    var sourceText = doc.getTextForSelection(remarkSel);

    return $$("div", {className: className.join(" ")},
      $$('div', {contentEditable: false, className: 'remark-header', onClick: this.handleToggle},
        $$('a', {href: "#", className: 'remark-title'}, sourceText),
        $$('a', {
          href: "#",
          className: 'delete-remark',
          dangerouslySetInnerHTML: {__html: '<i class="fa fa-remove"></i>'},
          onClick: this.handleDelete
        })
      ),

      $$(TextProperty, {
        tagName: "div",
        doc: this.props.writerCtrl.doc,
        path: [this.props.remark.id, "content"],
        writerCtrl: this.props.writerCtrl,
      })
    );
  }
});


module.exports = Remark;
@@ -855,199 +855,475 @@
     
-// TODO: is there a way to check if a doc update actually affects the remark annotation?%0A    // This is currently done way to often%0A    if (change.isAffected(%5Bthis.props.remark.id, %22content%22%5D
+var doc = this.props.writerCtrl.doc;%0A    var remark = doc.get(this.props.remark.id);%0A    if (!remark) return;%0A%0A    // The following only reacts on changes to the remarks start and end%0A    // path, but not to changes to text in spanned nodes.%0A    // TODO: we need an event proxy here that better tells you that the covered%0A    // range has been affected (~ContainerAnnotation event proxy)%0A    if (change.isAffected(remark.startPath) %7C%7C change.isAffected(remark.endPath
 )) %7B
@@ -1898,114 +1898,347 @@
     
-var remarkSel = this.props.remark.getSelection();%0A    var sourceText = doc.getTextForSelection(remarkSel);
+// NOTE: having the remark as instance here is dangerous, as%0A    // it might have been removed from the document already.%0A    // TODO: don't store node instances in props%0A    var remark = doc.get(this.props.remark.id);%0A    var sourceText;%0A    if (!remark) %7B%0A      sourceText = %22N/A%22;%0A    %7D else %7B%0A      sourceText = remark.getText();%0A    %7D
 %0A%0A  

Fix remark updates.