import React, { Component } from 'react';

const formatter = new Intl.DateTimeFormat('en', { month: 'short', day: 'numeric' });

export default class InjuryCard extends Component {
  constructor(props) {
    super();
  }
  
  render() {
    const teams = (this.props.injuries[0].team.id === this.props.awayId) ? this.props.injuries : this.props.injuries.reverse();
    
    const injuries = teams.map((team, idx) => {
      return (
        <table key={idx}>
  				<caption>
  					<img src={'https://a.espncdn.com/combiner/i?img=/i/teamlogos/nfl/500/' + team.team.abbreviation + '.png&amp;h=208&amp;w=208'} className="imageLoaded" />
  					{team.team.displayName}
  				</caption>
  				<thead>
  					<tr>
  						<th className="name">NAME, POS</th>
  						<th>STATUS</th>
  						<th>DATE</th>
  					</tr>
  				</thead>
  				<tbody>
  				  {
  				    team.injuries.map((injury, idx) => (
  				      <tr key={idx}>
      						<td className="name">
      							<span className="highlight-player AnchorLink">{injury.athlete.displayName}</span>, {injury.athlete.position.abbreviation}
      						</td>
      						<td>{injury.status}</td>
      						<td>
      							<div className="game-date-time">
      								<span className="game-date">{formatter.format(new Date(injury.date))}</span>
      							</div>
      						</td>
      					</tr>
  				    ))
  				  }
  				</tbody>
  			</table>
      )
    })
    
    return (
      <div id="gamepackage-injury-report">
      	<article className="sub-module injury-report-list">
      		<header className="bordered">
      			<h1>Injury Report</h1>
      		</header>
      		<div className="content">
      			{injuries}
      		</div>
      		<footer>
      			<a className="AnchorLink">Full Injury Report</a>
      		</footer>
      	</article>
      </div>
    )
  }
}