import React, { Component } from "react";
import PropTypes from "prop-types";
import Promise from "bluebird";

class DocList extends Component {
  constructor() {
    super()
    this.state = {selectedDoc: NaN}
    this.bindAll()
  }

  bindAll() {
    this.pullDoc = this.pullDoc.bind(this)
    this.selectDoc = this.selectDoc.bind(this)
    this.deselectDoc = this.deselectDoc.bind(this)
  }

  pullDoc(event, index) {
    event.preventDefault()
    event.stopPropagation()
    this.props.pullDoc(this.props.docs[index].Id)
  }

  selectDoc(index) {
    console.log("select ", index)
    this.state.selectedDoc = index
    this.setState(this.state)
  }

  deselectDoc(index) {
    console.log("deselect ", index)
    this.state.selectedDoc = NaN
    this.setState(this.state)
  }

  render() {
    let docNodes = this.props.docs.map((doc, index) => {
      return (<Doc
        id={doc.Id}
        name={doc.Name}
        index={index}
        select={this.selectDoc}
        pull={this.pullDoc}
        deselect={this.deselectDoc}
        highlighted={this.state.selectedDoc === index}
        key={index}
      />)
    })
    return (
      <div className="ui one column stackable grid container">
          {docNodes}
      </div>
    )
  }
}

DocList.propTypes = {
  pullDoc: PropTypes.func.isRequired,
  docs: PropTypes.array
}

class Doc extends Component {
  constructor() {
    super()
  }

  render() {
    return (
      <div className="column">
      {(this.props.highlighted) ? (
        <div className="ui raised segmant" onClick={() => this.props.deselect(this.props.index)}>
          <div className="two wide column">
          <div className="ui segment">
            <p> {this.props.name} </p>
          </div>
          <div className="column">
          <div className="ui segment">
            <div>
              <div> id: {this.props.id}</div>
              <div> pull status: (not used yet) </div>
            </div>
            <div>
              <div>
                <button onClick={(e) => this.props.pull(e, this.props.index)}>
                  pull book
                </button>
              </div>
            </div>
            </div>
          </div>
          </div>
        </div>

      ) : (
        <div className="ui raised segment" onClick={() => this.props.select(this.props.index)}>
          {this.props.name}
        </div>
      )}
    </div>
    )
  }
}

Doc.propTypes = {
  id: PropTypes.string,
  name: PropTypes.string,
  index: PropTypes.number,
  select: PropTypes.func.isRequired,
  deselect: PropTypes.func.isRequired,
  pull: PropTypes.func.isRequired,
  highlighted: PropTypes.bool
}

module.exports.DocList = DocList
module.exports.Doc = Doc

@@ -102,16 +102,51 @@
 uebird%22;
+%0Aimport watcher from %22./watcher.js%22
 %0A%0Aclass 
@@ -445,24 +445,88 @@
 t, index) %7B%0A
+    console.log(%22does doc watcher have token? %22, watcher.token)%0A
     event.pr
@@ -567,24 +567,33 @@
 gation()%0A   
+ let id =
  this.props.
@@ -596,41 +596,200 @@
 ops.
-pullDoc(this.props.docs%5Bindex%5D.Id
+docs%5Bindex%5D.Id%0A    watcher.makePostRequest(%22/api/book/pull%22, %7Bid%7D).then((xmlhttp) =%3E %7B%0A      console.log(%22success! %22, xmlhttp.response)%0A    %7D, (xmlhttp) =%3E %7B%0A      console.log(%22failure%22)%0A    %7D
 )%0A  
@@ -1535,46 +1535,8 @@
 = %7B%0A
-  pullDoc: PropTypes.func.isRequired,%0A
   do

move logic for making request into bookList