import React, { Component } from "react";

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

class Cards extends Component {
  bookedMig() {
    return this.props.migs["booked_count"];
  }
  waitingMig() {
    return this.props.migs["awaitterm_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.bookedMig()}
            </div>
            <div className="card-action">
              <a href="/upcoming-migrations">booked</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">waiting</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.completedMig()}
            </div>
            <div className="card-action">
              <a href="/completed">complete</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>
    );
  }
}

export default Cards;