var ReactCSSTransitionGroup = React.addons.CSSTransitionGroup; //allow React flavored transitions

class Application extends React.Component {
  // alternative to getInitialState
  constructor() {
    super();
    this.state = {
      search: "alltime",
      camperArr: [],
      asc: true
    };
  }

  // after Component mounts, all the api
  componentDidMount() {
    this.callApi("alltime");
  }

  // accepts a string 'alltime'/'recent' to append to url
  // returns results as this.state.camperArr
  callApi(str) {
    var req = "https://fcctop100.herokuapp.com/api/fccusers/top/" + str;
    this.serverRequest = $.get(req, function(result) {
      // add an id property to each element
      result.map(function(elem, idx) {
        elem["id"] = idx + 1;
      });
      this.setState({
        search: str,
        camperArr: result,
        asc: true
      });
    }.bind(this));
  }

  // toggles the column sorting asc/desc if click on current column
  // else calls the api with the given string
  toggleColumnSort(str) {
    if (this.state.search === str) {
      this.setState({
        camperArr: this.state.camperArr.reverse(),
        asc: this.state.asc ? false : true
      });
    } else {
      this.callApi(str);
    }
  }

  render() {
    // set up class names based on booleans to set active column / sorting icon
    var recentClass = classNames({
      'recent': true,
      'active': this.state.search === 'recent'
    });
    var alltimeClass = classNames({
      'alltime': true,
      'active': this.state.search === 'alltime'
    });
    var glyphiconClass = classNames({
      'glyphicon': true,
      'glyphicon-triangle-bottom': this.state.asc,
      'glyphicon-triangle-top': !this.state.asc
    });
    return (
      <div className="container">
        <div className="row">
          <div className="col-xs-12">
            <table className="table table-striped table-hover">
              <caption><h2><a href="https://www.freecodecamp.com" target="_blank">FreeCodeCamp</a> Leaderboard</h2></caption>
              <thead>
                <tr>
                  <th>Rank</th>
                  <th>Name</th>
                  <th className="points"><span className={recentClass} onClick={this.toggleColumnSort.bind(this, "recent")}>Past 30 Days<span className={glyphiconClass}></span></span></th>
                  <th className="points"><span className={alltimeClass} onClick={this.toggleColumnSort.bind(this, "alltime")}>All Time<span className={glyphiconClass}></span></span></th>
                </tr>
              </thead>
              <CamperList list={this.state.camperArr} />
            </table>
          </div>
        </div>
      </div>
    )
  }
}

// the list of campers
class CamperList extends React.Component {
  render() {
    var list = this.props.list;
    var items = list.map(function(elem, idx) {
      return <Camper key={elem["id"]} id={elem["id"]} name={elem["username"]} image={elem["img"]} alltime={elem["alltime"]} recent={elem["recent"]} link={"https://www.freecodecamp.com/" + elem["username"]} />
    });
    return (
        <ReactCSSTransitionGroup component="tbody" transitionName="fade" transitionEnterTimeout={500} transitionLeaveTimeout={300}>
          {items}
        </ReactCSSTransitionGroup>
    )
  }
}

// single camper
class Camper extends React.Component {
  render() {
    return (
      <tr>
        <td>{this.props.id}</td>
        <td><a href={this.props.link} target="_blank"><img src={this.props.image}></img></a><a href={this.props.link} target="_blank">{this.props.name}</a></td>
        <td className="points">{this.props.recent}</td>
        <td className="points">{this.props.alltime}</td>
      </tr>
    )
  }
}

ReactDOM.render(<Application />, document.getElementById('camper-app'));