import { IsolatedNodeComponent } from 'substance'
import TextPropertyEditor from './TextPropertyEditor'

class IsolatedNoteComponent extends IsolatedNodeComponent {
  render ($$) {
    // TODO
    // why class sc-entity??
    // rename dataId to calloutId ?? if so, change in provider
    // is there a better way than rendering a text property editor???
    // review ref name
    // do we need a ref ??
    const editing = (this.context.editor.props.disabled) ? 'selection' : 'full'

    let el = $$('div')
      .addClass('sc-entity')
      .attr('data-id', this.props.node.id)
      .append(
        $$(TextPropertyEditor, {
          multiLine: false,
          editing: editing,
          path: [this.props.node.id, 'content'],
          tagName: 'p'
        }
      )
      .ref('noteContentEditor-' + this.props.node.id))

    return el
  }
}

export default IsolatedNoteComponent