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

interface tag {
  image_id: string;
  last_modified: string;
  name: string;
  size: number;
}

interface ISidebar {
  isPublic: string,
  tags: Array<tag>,
  repository: Object
}

/**
 * The Component for the sidebar of the repo page
 * @param {string} isPublic - A string that states whether the repository is private or public
 * @param {tag} tags - The list of tags for the repository 
 * @param {object} repository - The list of properties for the repository 
 */
class repoSidebar extends React.Component<ISidebar, {}> {
  static propTypes = {
    isPublic: React.PropTypes.string.isRequired,
    tags: React.PropTypes.array.isRequired,
    repository: React.PropTypes.object.isRequired
  }
  render () {
    let isPublic: string = (this.props.isPublic) ? "Public" : "Private";
    let sortedTags: Array<any> = [];
    let tagRows: Array<any> = [];
    let badgeIcon: string = (this.props.isPublic) ? "rp-badge__icon--public" : "rp-badge__icon--private";
    let repository: any = this.props.repository;
    let sharing: string = repository.company || repository.namespace;
    
    for (let tagObject in this.props.tags) {
      sortedTags.push({
          name: this.props.tags[tagObject].name,
          lastModified: Date.parse(this.props.tags[tagObject].last_modified)
        });
    }

    sortedTags = sortedTags.sort(function(a, b) {
      return b.lastModified - a.lastModified;
    });

    sortedTags.slice(0,5).forEach(function(el, i){
      tagRows.push(
        <tr>
          <td>
            <i className="fa fa-tag rp-imagesTable__tagIcon" aria-hidden="true"></i>
            {el.name}                   
          </td>
          <td>
            {moment(el.lastModified).fromNow()}
          </td>
        </tr>
      );
    });

    return(
      <div>
        <div className="rp-badge">
          <div className={badgeIcon}>
            {isPublic}
          </div>
        </div>
        <div className="rp-sharing">
          {sharing} is sharing this container {this.props.isPublic ? "publically" : "privately"}
        </div>
        <div className="rp-imagesHeader">
          Latest Images
        </div>
        <div>
          <table className="co-table co-fixed-table rp-imagesTable">
            <thead>
              <tr>
                <th className="rp-imagesTable__headerCell">NAME</th>
                <th className="rp-imagesTable__headerCell">LAST MODIFIED</th>
              </tr>
            </thead>
            <tbody>
              {tagRows}
            </tbody>
          </table>
        </div>
      </div>
    );    
  }
}

export default repoSidebar;