//
// A simple list of items, with minus and plus buttons to add and remove
// items.
//

import React from 'react'
import {Button, ButtonGroup, ButtonToolbar, Glyphicon, FormControl} from 'react-bootstrap'

import './list_editor.less'

class ListEdit extends React.Component {

  static get defaultProps() {return{
    width: null,
    items: [
      'aaaaaaa',
      'bbbbbbb',
      'ccccccc'
    ],
    selected: null,  // string of the selected item
    onRemove: null,
    onAdd: null,
    onSelect: null,
    onKeyDown: null
  }}

  constructor(props) {
    super(props)
    this.click  = this.click.bind(this)
    this.add    = this.add.bind(this)
    this.remove = this.remove.bind(this)
  }

  row(str) {
    return this.props.items.indexOf(str)
  }

  click(e) {
    let row = parseInt(e.target.value)
    if (row >= 0) {
      if (this.props.onSelect) {
        this.props.onSelect(this.props.items[row])
      }
    }
  }

  add() {
    if (this.props.onAdd) {
      this.props.onAdd()
    }
  }

  remove() {
    if (this.props.onRemove) {
      let currentRow = this.row(this.props.selected)
      let newSelected = null
      if (this.props.items.length == currentRow + 1) {
        // if we remove the last item, set the new selected to be
        // the new last item.
        newSelected = this.props.items[currentRow - 1]
      } else {
        newSelected = this.props.items[currentRow + 1]
      }
      this.props.onRemove(this.props.selected, newSelected)
    }
  }

  componentDidMount() {
    if (this.props.onKeyDown) {
      this.listEditorDiv.addEventListener("keydown", this.props.onKeyDown)
    }
  }

  componentWillUnmount() {
    if (this.props.onKeyDown) {
      this.listEditorDiv.removeEventListener("keydown", this.props.onKeyDown)
    }
  }

  render() {
    let options = null
    if (this.props.items) {
      options = this.props.items.map((item, i) => {
        return <option className="list-option" key={i} value={i}>{item}</option>
      }, this)
    }
    return(
      <div
        ref={(div) => { this.listEditorDiv = div; }}
        className="list-editor" >
        <FormControl
          value={this.row(this.props.selected)}
          className="list-select"
          componentClass="select"
          size="5"
          onChange={this.click}
        >
          {options}
        </FormControl>
        <ButtonToolbar className="pull-right list-toolbar">
          <ButtonGroup>
            <Button onClick={this.add}>
              <Glyphicon glyph="plus" />
            </Button>
            <Button disabled={this.props.selected < 0} onClick={this.remove}>
              <Glyphicon glyph="minus" />
            </Button>
          </ButtonGroup>
        </ButtonToolbar>
      </div>
    )
  }

}

ListEdit.propTypes = {
  children: React.PropTypes.oneOfType([
    React.PropTypes.element,
    React.PropTypes.arrayOf(React.PropTypes.element)
  ])
}

export default ListEdit