import React from 'react';
import axios from 'axios';
import StockForm from './StockForm';
import StockList from './StockList';

export default class StockBox extends React.Component{
  constructor(props) {
    super(props);

    this.state = {
      data: []
    };

    this.loadActionsFromServer = this.loadActionsFromServer.bind(this);
    this.toggleActionUpdate = this.toggleActionUpdate.bind(this);
    this.handleActionSubmit = this.handleActionSubmit.bind(this);
    this.handleActionUpdate = this.handleActionUpdate.bind(this);
    this.handleActionDelete = this.handleActionDelete.bind(this);
  }

  loadActionsFromServer() {
    axios.get(this.props.url).then((response)=>{
      this.setState({data: response.data});
    }).catch((err)=>{
      console.error(this.props.url, status, err.toString());
    });
  }
  
  componentDidMount() {
  	this.loadActionsFromServer();
    // setInterval(this.loadCommentsFromServer, this.props.pollInterval);
  }

  handleActionSubmit(action) {
    console.log(action);

    var actions = this.state.data;
    // Optimistically set an id on the new action. It will be replaced by an
    // id generated by the server. In a production application you would likely
    // not use Date.now() for this and would have a more robust system in place.
    action.id = Date.now();
    
    axios.post(this.props.url, action).then((response)=>{
      console.log(response);
      var newActions = actions.concat([response.data]);
      this.setState({data: newActions});

    }).catch((err)=>{
      this.setState({data: actions});
      console.error(this.props.url, status, err.toString());
    });
  }

  toggleActionUpdate(editAction) {
    var actions = this.state.data.map(function(action) {
      if(action._id == editAction._id) {
        action.editing = !action.editing;
      }
      return action;
    });

    this.setState({data:actions});
  }

  handleActionUpdate(action) {
    var actions = this.state.data;
    axios.put(this.props.url+'/'+action._id, action).then((response)=>{
      this.toggleActionUpdate(action);
    }).catch((err)=>{
      this.setState({data:actions});
      console.error(this.props.url, status, err.toString());
    });
  }

  handleActionDelete(action) {
    var actions = this.state.data;

    axios.delete(this.props.url+'/'+action._id).then((response)=>{
      if(response.status == '204'){
        actions = actions.filter((c) => c.id!==action.id);
        this.setState({data: actions});
      }
    }).catch((err)=>{
      this.setState({data: actions});
      console.error(this.props.url, status, err.toString());
    });
  }
  
  render() {
    return (
      <div>
        <div className="stockBox">
          <h3>Buy</h3>
          <StockList data={this.state.data} 
            toggleActionUpdate={this.toggleActionUpdate}
            onActionUpdate={this.handleActionUpdate}
            onActionDelete={this.handleActionDelete} 
          />
          <StockForm onActionSubmit={this.handleActionSubmit} />
        </div>
        
      </div>
    );
  }
}

// <div className="stockBox">
//           <h3>Sell</h3>
//           <StockList data={this.state.data} 
//             toggleActionUpdate={this.toggleActionUpdate}
//             onActionUpdate={this.handleActionUpdate}
//             onActionDelete={this.handleActionDelete} 
//           />
//           <StockForm onActionSubmit={this.handleActionSubmit} />
//         </div>