import { NodeComponent } from 'substance'
import Button from './Button'
import { getPos } from '../util/nodeHelpers'
import removeElementAndXrefs from '../../util/removeElementAndXrefs'

export default class FnGroupComponent extends NodeComponent {

  didMount() {
    super.didMount()

    this.handleActions({
      'removeFn': this._removeFn
    })
  }

  render($$) {
    const node = this.props.node

    let el = $$('div').addClass('sc-fn-group').append(
      $$('div').addClass('se-title').append('Footnotes')
    )

    let fns = node.findAll('fn')
    fns.sort((a,b) => {
      return getPos(a) - getPos(b)
    })
    fns.forEach((fn) => {
      let FnComponent = this.getComponent('fn')
      el.append(
        $$(FnComponent, { node: fn }).ref(fn.id)
      )
    })

    if(fns.length === 0) {
      el.append(
        $$('div').addClass('se-empty-list').append(
          this.getLabel('no-footnotes')
        )
      )
    }

    el.append(
      $$(Button, {style: 'big', label: 'Add Footnote'})
        .on('click', this._addFn)
    )
    return el
  }

  _onLabelsChanged(refType) {
    if (refType === 'fn') {
      this.rerender()
    }
  }

  /*
    Insert new Footnote

    <fn id="fn2">
      <p>Please enter footnote content</p>
    </fn>
  */
  _addFn() {
    const editorSession = this.context.editorSession
    editorSession.transaction((tx) => {
      let fnGroup = tx.find('fn-group')
      let fn = tx.createElement('fn')
      let fnPlaceholder = tx.createElement('p')
      fn.append(fnPlaceholder)
      fnGroup.append(fn)
      tx.setSelection(null)
    })
    this.rerender()
  }

  _removeFn(fnId) {
    let editorSession = this.context.editorSession
    const doc = editorSession.getDocument()
    const parent = doc.find('fn-group')
    removeElementAndXrefs(editorSession, fnId, parent)
    this.rerender()
  }
}

@@ -1323,24 +1323,81 @@
 itorSession%0A
+    const footnoteManager = this.context.footnoteManager%0A
     editorSe
@@ -1420,24 +1420,24 @@
 n((tx) =%3E %7B%0A
-
       let fn
@@ -1637,24 +1637,60 @@
 ull)%0A    %7D)%0A
+    footnoteManager._updateLabels()%0A
     this.rer
@@ -1765,32 +1765,89 @@
 t.editorSession%0A
+    const footnoteManager = this.context.footnoteManager%0A
     const doc = 
@@ -1910,24 +1910,24 @@
 'fn-group')%0A
-
     removeEl
@@ -1969,16 +1969,52 @@
 parent)%0A
+    footnoteManager._updateLabels()%0A
     this

Update labels when footnotes are added/removed.