import React, { Component } from 'react';
import PieChart from './pie-chart.jsx';
 
export default class MatchupPredictor extends Component {
  render() {
    const {competitors, predictor} = this.props;
    
    let tieChance;
    const predictorTeams = competitors.map((competitor, idx) => {
      const predictorTeam = predictor[competitor.homeAway + 'Team'];
      tieChance = predictorTeam.teamChanceTie ? Number(predictorTeam.teamChanceTie) : null;
      return {
        color: competitor.team.color,
        abbreviation: competitor.team.abbreviation,
        chart: {
          value: predictorTeam.gameProjection || predictor[((competitor.homeAway === 'home') ? 'away' : 'home') + 'Team'].teamChanceLoss
        }
      }
    }).reverse();
    
    console.log('matchup predictor', predictorTeams);
      
    return (
      <div id="gamepackage-predictor">
      	<div className="sub-module team-statistics">
      		<header className="bordered">
      			<h1>Matchup Predictor</h1>
      		</header>
      		<div className="content" style={{paddingBottom: 8}}>
      			<PieChart teams={predictorTeams} size={120} />
      			<div className="percentage">
      				{tieChance && <span className="tie">Tie: {tieChance}%</span>}
      				<span className="disclaimer">According to ESPN's Football Power Index</span>
      			</div>
      		</div>
      	</div>
      </div>
		)
  }
};