import React, { Component, PropTypes } from 'react';
import MomentPropTypes from 'react-moment-proptypes';
import classnames from 'classnames';

// TODO Move prop types into class
class GameCell extends Component {
  static propTypes = {
    day: MomentPropTypes.momentObj.isRequired,
    isGameNight: PropTypes.bool.isRequired,
    isHomeGame: PropTypes.bool.isRequired,
    opponent: PropTypes.string,
    outcome: PropTypes.oneOf([ 'win', 'loss' ]),
    score: PropTypes.string,
    showScores: PropTypes.bool.isRequired,
    time: PropTypes.string,
  };

  static defaultProps = {
    isGameNight: false,
    isHomeGame: false,
    showScores: false,
  };

  renderGame() {
    const {
      isHomeGame,
      opponent,
      outcome,
      score,
      showScores,
      time,
    } = this.props;
    const isUpcoming = !outcome;

    return (
      <div>
        <p className={isHomeGame && 'bold'}>
          {isHomeGame ? 'vs' : '@'} {opponent}
        </p>
        {isUpcoming && <p className="h6">{time}</p>}
        {!isUpcoming && showScores && <p className="h6">{score}</p>}
      </div>
    );
  }

  render() {
    const { day, isGameNight, outcome, showScores } = this.props;
    const dayInMonth = day.format('D');
    const dayLabel = Number(dayInMonth) === 1
      ? `${day.format('MMM')} ${dayInMonth}`
      : dayInMonth;

    return (
      <div
        className={
          classnames([
            'game-cell',
            isGameNight && 'game-cell--is-game-night',
            showScores && 'game-cell--show-scores',
            outcome === 'win' && 'game-cell--is-win',
            outcome === 'loss' && 'game-cell--is-loss',
          ])
        }
      >
        <span className="game-cell__date">{dayLabel}</span>
        {isGameNight && this.renderGame()}
      </div>
    );
    // return (
    //   <div
    //     className={
    //       classnames([
    //         'game-cell',
    //         isGameNight && 'game-cell--game-night',
    //         showScores && 'game-cell--show-scores',
    //         outcome === 'win' && 'game-cell--is-win',
    //         outcome === 'loss' && 'game-cell--is-loss',
    //       ])
    //     }
    //   >
    //     <span className="game-cell__date">{dayLabel}</span>
    //
    //     {/* <div className="default-day-cell">
    //       <span className="default-day-cell__date">{dayLabel}</span>
    //       </div>
    //     */}
    //     <div className="game-cell__header">
    //       <span className="game-cell__header__date xs-hide">
    //         {dayLabel}
    //       </span>
    //       <span className="game-cell__header__date sm-hide md-hide lg-hide">
    //         {day.format('dddd')}, {day.format('MMM')} {day.format('D')} {time ? `at ${time}` : ''}
    //       </span>
    //       <span>
    //         {isGameNight ? '\uD83C\uDFC0' : ''}
    //       </span>
    //     </div>
    //     {opponent && (
    //       <div
    //         className={
    //           classnames([
    //             'game-cell__matchup',
    //             isHomeGame && 'game-cell__matchup--home',
    //           ])
    //         }
    //       >
    //         <span>
    //           {isHomeGame ? 'vs.' : '@'} {opponent}
    //         </span>
    //         {!isUpcoming && showScores &&
    //           <span className="sm-hide md-hide lg-hide">
    //             {' '}({score})
    //           </span>
    //         }
    //         <span className="block xs-hide h6 regular">
    //           {isUpcoming && time}
    //           {!isUpcoming && showScores && `(${score})`}
    //         </span>
    //       </div>
    //     )}
    //   </div>
    // );
  }
}

export default GameCell;

@@ -1804,1856 +1804,8 @@
  );%0A
-    // return (%0A    //   %3Cdiv%0A    //     className=%7B%0A    //       classnames(%5B%0A    //         'game-cell',%0A    //         isGameNight && 'game-cell--game-night',%0A    //         showScores && 'game-cell--show-scores',%0A    //         outcome === 'win' && 'game-cell--is-win',%0A    //         outcome === 'loss' && 'game-cell--is-loss',%0A    //       %5D)%0A    //     %7D%0A    //   %3E%0A    //     %3Cspan className=%22game-cell__date%22%3E%7BdayLabel%7D%3C/span%3E%0A    //%0A    //     %7B/* %3Cdiv className=%22default-day-cell%22%3E%0A    //       %3Cspan className=%22default-day-cell__date%22%3E%7BdayLabel%7D%3C/span%3E%0A    //       %3C/div%3E%0A    //     */%7D%0A    //     %3Cdiv className=%22game-cell__header%22%3E%0A    //       %3Cspan className=%22game-cell__header__date xs-hide%22%3E%0A    //         %7BdayLabel%7D%0A    //       %3C/span%3E%0A    //       %3Cspan className=%22game-cell__header__date sm-hide md-hide lg-hide%22%3E%0A    //         %7Bday.format('dddd')%7D, %7Bday.format('MMM')%7D %7Bday.format('D')%7D %7Btime ? %60at $%7Btime%7D%60 : ''%7D%0A    //       %3C/span%3E%0A    //       %3Cspan%3E%0A    //         %7BisGameNight ? '%5CuD83C%5CuDFC0' : ''%7D%0A    //       %3C/span%3E%0A    //     %3C/div%3E%0A    //     %7Bopponent && (%0A    //       %3Cdiv%0A    //         className=%7B%0A    //           classnames(%5B%0A    //             'game-cell__matchup',%0A    //             isHomeGame && 'game-cell__matchup--home',%0A    //           %5D)%0A    //         %7D%0A    //       %3E%0A    //         %3Cspan%3E%0A    //           %7BisHomeGame ? 'vs.' : '@'%7D %7Bopponent%7D%0A    //         %3C/span%3E%0A    //         %7B!isUpcoming && showScores &&%0A    //           %3Cspan className=%22sm-hide md-hide lg-hide%22%3E%0A    //             %7B' '%7D(%7Bscore%7D)%0A    //           %3C/span%3E%0A    //         %7D%0A    //         %3Cspan className=%22block xs-hide h6 regular%22%3E%0A    //           %7BisUpcoming && time%7D%0A    //           %7B!isUpcoming && showScores && %60($%7Bscore%7D)%60%7D%0A    //         %3C/span%3E%0A    //       %3C/div%3E%0A    //     )%7D%0A    //   %3C/div%3E%0A    // );%0A
   %7D%0A

remove commented out code