<commit_before>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')
      .attr('data-id', '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"><commit_msg>More minimal display when no footnotes are in the document.<commit_after>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')
      .attr('data-id', 'fn-group')
    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-title').append('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">
{'fraction_non_alphanumeric': 0.17405318291700242, 'fraction_numerical': 0.0016116035455278, 'mean_word_length': 2.38283378746594, 'pattern_counts': {'":': 0, '<': 5, '<?xml version=': 0, '>': 10, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '1356771', 'n_tokens_mistral': 855, 'n_tokens_neox': 836, 'n_words': 166}