import * as React from "react";

interface IBody {
  description: string
}

/**
 * The Component for the main body of the repo page
 * @param {string} description - The description of the repository
 */
class body extends React.Component<IBody, {}> {
  static propTypes = {
    description: React.PropTypes.string.isRequired,
  }
  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">
                    TODO (IAN): Convert the build directives to angular components
                  </div>
              </div>
          </div>
      </div>
    );
  }
}

export default body;