class Tabs extends React.Component {

  render() {
    console.log("Tabs.render()");
    return (
      <ul className="nav nav-tabs">
        {tabData.map(function(tab){
          return (
            <Tab data={tab} isActive={this.props.activeTab === tab} handleClick={this.props.changeTab.bind(this,tab)} />
          );
        }.bind(this))}
      </ul>
    );
  }

}

class Tab extends React.Component {

  render() {
    console.log("Tab.render()");
    return (
      <li onClick={this.props.handleClick} className={this.props.isActive ? "active" : null}>
        <a href="#">{this.props.data.name}</a>
      </li>
    );
  }

}

class TabContent extends React.Component {

  render() {
    console.log("TabContent.render()");
    return (
      <div>
        {this.props.activeTab.name === 'File Info' ?
        <section className="panel panel-success">
          <FileInformationBox file={ this.props.file } response={ null } annotations={ this.props.annotations } />
        </section>
        :null}
        {this.props.activeTab.name === 'Filter Data' ?
        <section className="panel panel-warning">
          <FilterBox file={ file } />
        </section>
        :null}
      </div>
    );
  }
}

class FileInformationTabs extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      response: props.response,
      file: props.file,
      annotations: props.annotations
    };
  }

  handleClick(tab) {
    this.setState(
      {
        activeTab: tab
      }
    );
  }

  render() {
    console.log("FileInformationTabs.render()");
    return (
      <div>
        <Tabs activeTab={this.props.activeTab} changeTab={this.handleClick} />
        <TabContent
          file={ this.state.file }
          response={ this.state.response }
          annotations={ this.state.annotations }
          activeTab={ this.props.activeTab }
        />
      </div>
    );
  }
}

class FilterBox extends React.Component {

  render() {
    console.log("FilterBox.render()");
    return (
      <div>
        <h4>Filter Data</h4>
      </div>
    )
  }
}