import React, { Component } from "react";

// styles and collects each endpoint
// booked, awaitterm, complete and missed
// is referenced on Home

class Cards extends Component {
  upcomingMig() {
    return this.props.migs["upcoming_count"];
  }
  bookedMig() {
    return this.props.migs["booked_count"]
  }
  waitingMig() {
    return this.props.migs["pendterm_count"];
  }
  completedMig() {
    return this.props.migs["complete_count"];
  }
  missedMig() {
    return this.props.migs["missed_count"];
  }

  render() {
    if (!this.props.migs) {
      return <div />;
    }

    return (
      <div className="row">
        <div className="col s6 m4">
          <div className="card grey darken-1">
            <div className="card-content white-text">
              <span className="card-title"></span>
              {this.upcomingMig()}
            </div>
            <div className="card-action">
              <a href="/upcoming-migrations">upcoming</a>
            </div>
          </div>
        </div>
        <div className="col s6 m4">
          <div className="card grey darken-1">
            <div className="card-content white-text">
              <span className="card-title"></span>
              {this.bookedMig()}
            </div>
            <div className="card-action">
              <a href="/booked">booked</a>
            </div>
          </div>
        </div>
        <div className="col s6 m3">
          <div className="card grey darken-1">
            <div className="card-content white-text">
              <span className="card-title"></span>
              {this.missedMig()}
            </div>
            <div className="card-action">
              <a href="/missed">missed</a>
            </div>
          </div>
        </div>
        <div className="col s6 m4">
          <div className="card grey darken-1">
            <div className="card-content white-text">
              <span className="card-title"></span>
              <p></p>
              {this.waitingMig()}
            </div>
            <div className="card-action">
              <a href="/pending-terminations">pending term</a>
            </div>
          </div>
        </div>
      </div>
    );
  }
}

export default Cards;