import React, { Component } from 'react';

const BTC_URL = 'http://54.213.83.132/hackoregon/http/oregon_individual_contributors/';

export default class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      sortOrder: 'ascending',
      data: [],
      total: '',
    };
  }
  async componentDidMount() {
    let URL = BTC_URL + '5/';
    let response = await fetch(URL);
    let newData = await response.json();
    console.log('Our asynch/await data:', newData); // eslint-disable-line no-console
    this.setState({
      data: newData,
    });
  }
  async componentWillUpdate() {
    if (this.state.data.length != this.state.total) {
      let new_URL = BTC_URL + this.state.total + '/';
      let response = await fetch(new_URL);
      let newData = await response.json();
      console.log('Our asynch/await data:', newData); // eslint-disable-line no-console
      this.setState({
        data: newData,
      });
    }
  }
  onKeyDownHandler(e) {
    switch (e.key) {
      case 'Enter': {
        if (e.target.value === '') {
          return;
        }
        const newTotal = e.target.value;
        this.setState({
          total: newTotal,
        });
        console.log('enter pressed', this.state.total); // eslint-disable-line no-console
      }
    }
  }
  render() {
    return (
      <div className='container'>
        <div className='row'>
          <h2>Individuals</h2>
          <label>Amount</label>
          <input type='text'
                 placeholder='enter number'
                 value={this.state.total}
                 onKeyDown={this.onKeyDownHandler.bind(this)}
                 onChange={e => this.setState({ total: e.target.value })} ></input>
          <p><span>Ascending</span> / <span>Descending</span></p>
          <table className='table'>
            <thead>
              <tr>
                <th>#</th>
                <th>Payee</th>
                <th>Sum</th>
              </tr>
            </thead>
            <BTCsorter data={this.state.data}/>
          </table>
        </div>
      </div>
    );
  }
}
class BTCsorter extends React.Component {
  constructor(props) {
    super(props);
  }

  render() {
    const rows = this.props.data.map((item, idx) => {
      return (
        <tr key={item.contributor_payee}>
          <td className='scope'>{idx + 1}</td>
          <td>{item.contributor_payee}</td>
          <td>{item.sum}</td>
        </tr>
      );
    });
    return (
      <tbody>{rows}</tbody>
    );
  }
}

BTCsorter.propTypes = {
  data: React.PropTypes.arrayOf(React.PropTypes.object).isRequired,
};