context = window
rest = window.JK.Rest()
logger = context.JK.logger

@EditableList = React.createClass({
  objects: []

  listObjects: ->
    objs=[]
    @root = jQuery(this.getDOMNode())
    $(".list-item", @root).each ->
      objs.push $(this).data("object-id")
    objs

  deleteItem: (i, e) ->
    e.preventDefault()

    this.props.listItems.splice(i,1)
    this.props.onItemChanged(this.props.objectName, this.props.listItems)

  render: () ->
    object_options = []


    if this.props.listItems? && this.props.listItems.length > 0
      for object,i in this.props.listItems
        nm = "item_#{i}"
        displayValue = this.props.formatListItem(object)
        object_options.push `<div key={displayValue} className='list-item'>
            <div className='display-value left'>{displayValue}</div>
            <div className='actions'>
              <a className='delete-list-item right' onClick={this.deleteItem.bind(this, i)} >X</a>
            </div>
        </div>`
    else
      object_options.push `<div key={"None"} className='display-value'><em>None</em></div>`

    `<div className="EditableList react-component">
        <div className="editable-scroller left">
          {object_options}
        </div>
    </div>`

})