import * as React from "react";
import Build from "./build";

interface IBody {
  description: string;
  api: Object;
  repository: Object;
}

interface IBodyState {
  currentBuild: any;
}

/**
 * The Component for the main body of the repo page
 * @param {string} description - The description of the repository
 * @param {object} api - The ApiService injected from Angular
 * @param {object} repository - The list of properties for the repository
 */
class body extends React.Component<IBody, IBodyState> {
  static propTypes = {
    description: React.PropTypes.string.isRequired,
    api: React.PropTypes.object.isRequired,
    repository: React.PropTypes.object.isRequired,
  }
  constructor(props){
    super(props)
    this.state = {
      currentBuild: []
    };
  }
  componentDidMount() {
    setInterval(() => this.getBuilds(), 1000);
  }
  getBuilds() {
    let api: any = this.props.api;
    let repository: any = this.props.repository;
    let params: Object = {
      'repository': repository.namespace + '/' + repository.name,
      'limit': 8
    };

    api.getRepoBuildsAsResource(params, true).get((data) => {
      let builds: Array<Object> = [];
      data.builds.forEach((element, i) => {
        builds.push({
          user: element.manual_user,
          id: element.id,
          display_name: element.display_name,
          started: element.started,
          tags: element.tags,
          phase: element.phase,
          trigger: element.trigger,
          trigger_metadata: element.trigger_metadata
        });
      });
      
      this.setState({
        currentBuild: builds
      });
    });
  }
  render () {
    let description: string = this.props.description;
    if (description === null || description === "") {
      description = "No Description";
    }
    return(
      <div>
        <ul className="nav nav-tabs rp-tabs">
          <li className="active">
            <a data-target="#tab1" data-toggle="tab">Description</a>
          </li>
          <li>
            <a data-target="#tab2" data-toggle="tab">Automated Builds</a>
          </li>
        </ul>
          <div className="panel-body rp-panelBody">
              <div className="tab-content">
                  <div className="tab-pane in active" id="tab1">
                    <div className="rp-description">{description}</div>
                  </div>
                  <div className="tab-pane" id="tab2">
                    <h3 className="tab-header">Repository Builds</h3>
                    <div className="panel-body">
                        <Build data={this.state.currentBuild}/>
                    </div>
                  </div>
              </div>
          </div>
      </div>
    );
  }
}

export default body;