import React from 'react';

export default class Bill extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      monthNames: ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"],
      today: new Date(),
      nextWeek: new Date().addDays(7),
    };
    this.toggleSelected = this.toggleSelected.bind(this);
  }

   getDateSuffix(date) {
    if (date >= 11 && date <= 13) {
      return "th";
    }

    switch (date % 10) {
      case 1: return "st";
      case 2: return "nd";
      case 3: return "rd";
      default: return "th";
    }
  }

  toggleSelected(e, value) {
    this.props.onBillSelected(e, this);
  }

  render() {
    const today = new Date();
    const nextWeek = new Date().addDays(6);
    const daysUntilDue = this.props.dueDate < today
      ? Math.ceil(Math.abs(today.getTime() - this.props.dueDate.getTime()) / (1000 * 3600 * 24))
      : -1;

    const classNames = require('classnames');
    const billStatus = classNames({
      'ui card': true,
      'ui raised card': this.props.isSelected,
    });

    const dueDateClass = classNames({
      'ui ribbon label': true,
      'ui red ribbon label': this.props.dueDate < today,
      'ui green ribbon label': this.props.dueDate > today && this.props.dueDate < nextWeek,
    });

    const style = {
      width: '350px'
    };

    return (
            <div className={billStatus} style={style} onClick={this.toggleSelected}>
              <div className="content">
                <div className="header">
                  <div className={dueDateClass}>{this.props.amountDue}</div>
                  <span>{this.props.billName}</span>
                </div>

                  <div className="meta">{daysUntilDue == -1 ? `Overdue` : `Due in ${daysUntilDue}`}</div>
                  <div className="ui bottom right attached label">{this.state.monthNames[this.props.dueDate.getMonth()]} {this.props.dueDate.getDate()}{this.getDateSuffix(this.props.dueDate.getDate())}</div>
                  <span className="dueDate">{this.props.billedBy}</span>

                </div>
            </div>
    );
  }
}

"use strict";
import React from 'react';
import {render} from 'react-dom';
import Bill from './components/bill.jsx';

export default class App extends React.Component {

  render() {
    return (
        <div className="ui stackable five column grid">
          <div className="column">
          <Bill billName="Internet"
                amountDue="64"
                dueDate={new Date()}
                billedBy="Cox Communications"
                billInfo="This bill is overdue by 1 day" /></div>
              <div className="column">
          <Bill billName="G Drive"
                amountDue="5"
                dueDate={new Date().addDays(2)}
                billedBy="Google"
                billInfo="This bill is coming up: due in 2 days." />
            </div>
              <div className="column">
          <Bill billName="Automotive Insurance"
                amountDue="64"
                dueDate={new Date().addDays(10)}
                billedBy="Progress Insurance"
                billInfo="This bill is not due for another 10 days." />
            </div>
              <div className="column">
          <Bill billName="G Suite"
                amountDue="5"
                dueDate={new Date().addDays(15)}
                billedBy="Google"
                billInfo="This bill is not due for a couple weeks." />
            </div>
        </div>
    );
  }
}
render(<App />, document.getElementById('app'));