import React, { Component } from 'react';

const standingMap = {
  nfl: [0, 1, 3, 2, 4, 5],
  nba: [0, 1, 2, 3, 4]
}
 
 export default class Standings extends Component {
  render() {
    const {group, teamIds} = this.props,
          rows = group.standings.entries.map((entry, idx) => {
            const stats = entry.stats;
            
            return (
              <tr key={idx} className={teamIds.includes(entry.id) ? 'highlight' : ''}>
    						<td><span className="AnchorLink">{entry.team}</span></td>
    						<React.Fragment>
    						  {
      						  standingMap[this.props.league].map(idx => (
      						    <td className="right">{stats[idx].displayValue}</td>
      						  ))
      						}
    						</React.Fragment>
    					</tr>
            )
          }),
          firstStats = group.standings.entries[0].stats;
      
    return (
      <div>
      	<article className="sub-module standings">
      		<header>
      			<h1>{group.header}</h1>
      		</header>
      		<div className="content">
      			<table className="mod-data">
      				<thead>
      					<tr>
      						<th scope="col" className="left" title="Team">TEAM</th>
      						<React.Fragment>
        						{
        						  standingMap[this.props.league].map(idx => (
        						    <th scope="col" className="right" title={firstStats[idx].displayName}>{firstStats[idx].shortDisplayName}</th>
        						  ))
        						}
      						</React.Fragment>
      					</tr>
      				</thead>
      				<tbody>
      				  {rows}
      				</tbody>
      			</table>
      		</div>
      		<footer>
      			<a href="https://www.espn.com/nfl/standings">Full Standings</a>
      		</footer>
      	</article>
      </div>
		)
  }
}