 import React, { Component } from 'react';

export default class PickCenter extends Component {
  render() {
    
    const {pickCenter, awayTeam, homeTeam} = this.props,
          teamRankings = pickCenter.find(item => item.provider.name === 'teamrankings'),
          numberFire = pickCenter.find(item => item.provider.name === 'numberfire'),
          consensus = pickCenter.find(item => item.provider.name === 'consensus'),
          topPickO = pickCenter[0], //Math.max.apply(Math, pickCenter.map(item => (item.provider.priority))),
          topHome = topPickO.homeTeamOdds,
          topAway = topPickO.awayTeamOdds;
          
    let awayRecord = awayTeam.record[0].displayValue,
        homeRecord = awayTeam.record[0].displayValue;
        
    if (teamRankings) {
      const awaySR = teamRankings.awayTeamOdds.spreadRecord,
            homeSR = teamRankings.homeTeamOdds.spreadRecord;
      
      awayRecord += ', ' + awaySR.wins + '-' + awaySR.losses + (awaySR.pushes ? ('-' + awaySR.pushes) : '') + ' ATS';
      homeRecord += ', ' + homeSR.wins + '-' + homeSR.losses + (homeSR.pushes ? ('-' + homeSR.pushes) : '') + ' ATS';
    }
          
          
          
    console.log('away and home', awayTeam, homeTeam, numberFire, teamRankings, consensus, pickCenter);
      
    return (
      <div className="sub-module pick-center">
      	<div className="pick-center">
      		<div className="pick-center-content">
      			<h1>PickCenter</h1>
  					<table className="smallTable">
  						<thead>
  							<tr>
  								<th className="team" colSpan="3">
  									<div className="img-container">
  										<img src={'https://a.espncdn.com/combiner/i?img=/i/teamlogos/nfl/500/' + awayTeam.team.abbreviation + '.png&amp;h=100&amp;w=100'} className="imageLoaded" />
										</div>
										<div className="sb-meta">
											<p className="record">{awayRecord}</p>
										</div>
									</th>
									<th className="team" colSpan="3">
										<div className="img-container">
											<img src={'https://a.espncdn.com/combiner/i?img=/i/teamlogos/nfl/500/' + homeTeam.team.abbreviation + '.png&amp;h=100&amp;w=100'} className="imageLoaded" />
										</div>
										<div className="sb-meta">
											<p className="record">{homeRecord}</p>
										</div>
									</th>
								</tr>
							</thead>
							<tbody>
							  {teamRankings &&
									<tr>
										<td className="score awayteam" colSpan="2">{((teamRankings.awayTeamOdds.spreadOdds > 0) && '+') + teamRankings.awayTeamOdds.spreadOdds}</td>
										<td className="label" colSpan="2">
											<span className="teamrankings">TeamRankings</span>
										</td>
										<td className="score hometeam" colSpan="2">{((teamRankings.homeTeamOdds.spreadOdds > 0) && '+') + teamRankings.homeTeamOdds.spreadOdds}</td>
									</tr>
							  }
								
								{numberFire &&
									<tr>
										<td className="score awayteam" colSpan="2">{((numberFire.awayTeamOdds.spreadOdds > 0) && '+') + numberFire.awayTeamOdds.spreadOdds}</td>
										<td className="label" colSpan="2">
											<span className="numberfire">numberFire</span>
										</td>
										<td className="score hometeam" colSpan="2">{((numberFire.homeTeamOdds.spreadOdds > 0) && '+') + numberFire.homeTeamOdds.spreadOdds}</td>
									</tr>
								}
								
								{consensus &&
									<tr>
										<td className="score" colSpan="6">
											<span className="label">Spread Consensus Pick</span>
											<span className="value">{consensus.details.split(' ')[0]}</span>
										</td>
									</tr>
								}
								
								
								<tr>
									<td className="score" colSpan="2">{((topAway.spreadOdds > 0) && '+') + topAway.spreadOdds}</td>
									<td className="label" colSpan="2">Spread</td>
									<td className="score" colSpan="2">{((topHome.spreadOdds > 0) && '+') + topHome.spreadOdds}</td>
								</tr>
								
								<tr>
									<td className="score" colSpan="2">{((topAway.moneyLine > 0) && '+') + topAway.moneyLine}</td>
									<td className="label" colSpan="2">Money Line</td>
									<td className="score" colSpan="2">{((topHome.moneyLine > 0) && '+') + topHome.moneyLine}</td>
								</tr>
								
								<tr>
									<td className="score" colSpan="6">
										<span className="label">Over/Under</span>
										<span>{topPickO.overUnder}</span>
									</td>
								</tr>
							</tbody>
						</table>
					</div>
				</div>
			</div>
		)
  }
}