import * as React from 'react';
import * as moment from "moment";

export default class Build extends React.Component<any, any> {
  render () {
    let builds: any = this.props.data;
    let buildsTable: any = [];
    if (Object.keys(builds).length === 0) {
      buildsTable.push('Loading')
    }
    else {
      builds.forEach((element, i) => {
        let tags: Array<any> = []
        element.tags.forEach(tag => {
          tags.push(
            <span className="building-tag">
              <span className="tag-span rp-tagSpan">
                <i className="fa fa-tag"></i> {tag}
              </span>
            </span>
          );
        });
        let buildId: string = element.id.split('-')[0];
        buildsTable.push(
          <tr key={buildId}>
            <td>{element.phase}</td>
            <td>{buildId}</td>
            <td>{element.trigger_metadata.commit_info.message}</td>
            <td>{moment(element.started).format('l')}</td>
            <td>{tags}</td>
          </tr>
        )
      });
    }
    return(
      <table className="co-table">
        <thead>
          <tr>
            <td></td>
            <td>BUILD ID</td>
            <td>TRIGGERED BY</td>
            <td>DATE STARTED</td>
            <td>TAGS</td>
          </tr>
        </thead>
        <tbody>
          {buildsTable}
        </tbody>
      </table>
    );
  }
}