import React, { Component } from 'react';


const nflGeneralStats = ['Points Per Game', 'Points Allowed Per Game'],
nflCategories = {
  'Total Yards': ['Yards Passing', 'Yards Rushing'],
  'Yards Allowed': ['Pass Yards Allowed', 'Rush Yards Allowed']
},
categories = {
  nba: [
    {abbr: 'PTS', label: 'Points Per Game'},
    {abbr: 'PA', label: 'Points Against'},
    {abbr: 'FG%', label: 'Field Goal %'},
    {abbr: 'REB', label: 'Rebounds Per Game'},
    {abbr: 'AST', label: 'Assists Per Game'},
    {abbr: 'BLK', label: 'Blocks Per Game'},
    {abbr: 'STL', label: 'Steals Per Game'},
    {abbr: 'STRK', label: 'Streak'},
    {abbr: 'L10', label: 'Last 10 Games'}
  ]
};

export default class TeamStatCard extends Component {
  render() {
    //const teams = (this.props.injuries[0].team.id === this.props.awayId) ? this.props.injuries : this.props.injuries.reverse();
    const {league, teams} = this.props,
          team0stats = teams[0].statistics,
          team1stats = teams[1].statistics;
    
    return (
      <div id="gamepackage-team-stats-table">
      	
      	{(league === 'nfl') ?
      	    <article className="sub-module team-stats-list">
          		<div className="content">
          			<table className="mod-data">
          				<thead>
          					<tr className="header">
          						<th><h1>Team Stats</h1></th>
          						<th>
          							<img src={'https://a.espncdn.com/combiner/i?img=/i/teamlogos/' + league + '/500/' + teams[0].team.abbreviation + '.png&amp;h=100&amp;w=100'} />
          						</th>
          						<th>
          							<img src={'https://a.espncdn.com/combiner/i?img=/i/teamlogos/' + league + '/500/' + teams[1].team.abbreviation + '.png&amp;h=100&amp;w=100'} />
          						</th>
          					</tr>
          				</thead>
          				<tbody>
          				  {[
          				    nflGeneralStats.map((statLabel, idx) => (
          				      <tr key={idx}>
              						<td>{statLabel}</td>
              						<td>{team0stats.find(stat => stat.label === statLabel).displayValue}</td>
              						<td>{team1stats.find(stat => stat.label === statLabel).displayValue}</td>
              					</tr>
          				    )),
          				    
          				    Object.keys(nflCategories).map((category, idx) => (
          				      <tr key={idx} className="highlight">
              						<td>{category}</td>
              						<td>{team0stats.find(stat => stat.label === category).displayValue}</td>
              						<td>{team1stats.find(stat => stat.label === category).displayValue}</td>
              					</tr>
          				    ))
          				  ]}
          				</tbody>
          			</table>
          		</div>
          	</article>
          : (league === 'nba' || league === 'mlb') ?
          	<article className="sub-module team-stats-list">
            	<div className="content show-mobile">
            		<table className="mod-data">
            			<thead>
            				<tr className="header">
            					<th>
            						<h1>Team Stats</h1>
            					</th>
            					<th>
          						<img src={'https://a.espncdn.com/combiner/i?img=/i/teamlogos/' + league + '/500/' + teams[0].team.abbreviation + '.png&amp;h=100&amp;w=100'} />
          						</th>
          						<th>
          							<img src={'https://a.espncdn.com/combiner/i?img=/i/teamlogos/' + league + '/500/' + teams[1].team.abbreviation + '.png&amp;h=100&amp;w=100'} />
        							</th>
        						</tr>
        					</thead>
        					<tbody>
        					  {categories[league].map(cat => (
        					    <tr>
        					      <td>{cat.label}</td>
        					      <td>{console.log('looking', cat.abbr, team0stats) || team0stats.find(stat => stat.abbreviation === cat.abbr).label}</td>
        					      <td>{team1stats.find(stat => stat.abbreviation === cat.abbr).label}</td>
        					    </tr>
        					  ))}
        					</tbody>
        				</table>
        			</div>
        			<div className="show-desktop">
        				<header className="bordered">
        					<h1>Team Stats</h1>
        				</header>
        				<div className="content">
        					<table className="mod-data">
        						<thead>
        							<tr>
        							  {categories[league].map((cat, idx) => (
        							    <th scope="col" className={idx ? 'right' : 'left'} title={cat.label}>{cat.abbr}</th>
            					  ))}
        							</tr>
        						</thead>
        						<tbody>
        							<tr>
        								<td>
        									<img className="team-logo" src={'https://a.espncdn.com/combiner/i?img=/i/teamlogos/' + league + '/500/' + teams[0].team.abbreviation + '.png&amp;h=100&amp;w=100'} />
        									<span style={{verticalAlign: 'super'}}>{teams[0].team.abbreviation}</span>
      									</td>
      									<React.Fragment>
              						{categories[league].map(cat => (
              					    <td>{team0stats.find(stat => stat.abbreviation === cat.abbr).displayValue}</td>
              					  ))}
            					  </React.Fragment>
      								</tr>
      								
        								
      								<tr>
      								  <td>
      									  <img className="team-logo" src={'https://a.espncdn.com/combiner/i?img=/i/teamlogos/' + league + '/500/' + teams[1].team.abbreviation + '.png&amp;h=100&amp;w=100'} />
      										{teams[1].team.abbreviation}
      									</td>
      									<React.Fragment>
              						{categories[league].map(cat => (
              					    <td>{team1stats.find(stat => stat.abbreviation === cat.abbr).displayValue}</td>
              					  ))}
            					  </React.Fragment>
      								</tr>
    								</tbody>
    							</table>
    						</div>
    					</div>
      			</article> : null
      	  }
      </div>
    )
  }
}