import React, { Component } from 'react';
 
export default class FootBallScoringSummary extends Component {
  render() {
    const {comp, drives, scoringPlays} = this.props,
          competitors = comp.competitors,
          periods = [null, 'First Quarter', 'Second Quarter', 'Third Quarter', 'Fourth Quarter', 'Overtime'];
  
    const headerScoreTHs = competitors[0].linescores.map((ls, idx) => (<th key={idx}>{idx+1}</th>));
    
    const headerScores = competitors.map((competitor, idx) => {
      const team = competitor.team,
            teamLogo = team.logos[0].href;
            
      return (
        <tr key={idx}>
  				<td className="team">
  					<img className="team-logo" src={'https://a.espncdn.com/combiner/i?img=' + teamLogo.substr(teamLogo.indexOf('/i/')) + '&amp;h=50&amp;scale=crop&amp;w=50'} />
  					{team.name}
  				</td>
  				{competitor.linescores.map((ls, iidx) => (
  				  <td key={iidx}>{ls.displayValue}</td>
  				))}
  				<td className="final-score">{competitor.score}</td>
			</tr>)
    });
    
    const teamLogos = competitors.reduce((map, competitor) => {
      const teamLogo = competitor.team.logos[0].href;
      map[competitor.team.abbreviation] = teamLogo.substr(teamLogo.indexOf('/i/'));
      return map;
    }, {});
    
    const usedPeriods = [];
    const scoringSummary = drives.map((drive, idx) => {
      const out = [];
      if (!usedPeriods.includes(drive.end.period.number)) {
        out.push(
          <tr key={idx + '-1'} className="highlight">
  					<th className="quarter" colSpan="2">{periods[drive.end.period.number]}</th>
  					<th className="home-team">{competitors[0].team.abbreviation}</th>
  					<th className="away-team">{competitors[1].team.abbreviation}</th>
  				</tr>
        )
        usedPeriods.push(drive.end.period.number);
      }
      if (drive.isScore) {
        //const lastPlay = drive.plays[drive.plays.length-1];
        const scorePlay = drive.plays.slice(Math.max(drive.plays.length-2, 0)).find(play => (play.scoringPlay));
        console.log('drive', drive, scoringPlays)
        out.push(
          <tr key={idx + '-2'}>
  					<td className="logo">
  						<img className="team-logo" src={'https://a.espncdn.com/combiner/i?img=' + teamLogos[drive.team.abbreviation] + '&amp;h=100&amp;w=100'} />
  					</td>
  					<td className="game-details">
  						<div className="table-row">
  							<div className="score-type" title={drive.displayResult}>{drive.result}</div>
  							<div className="time-stamp">{scorePlay.clock.displayValue}</div>
  							<div className="drives">
  								<div className="headline">{scoringPlays.find(play => (play.id === scorePlay.id)).text}</div>
  								<div className="drive-details">{drive.description}</div>
  							</div>
  						</div>
  					</td>
  					<td className="away-score">{scorePlay.awayScore}</td>
  					<td className="home-score">{scorePlay.homeScore}</td>
  				</tr>
        );
      }
      return out;
    })
      
    return (
      <div id="gamepackage-scoring-summary">
      	<article className="sub-module drives-summary">
      		<div className="content">
      			<div id="gamepackage-scoring-wrap">
      				<div className="scoring-summary">
      					<header>
      						<h1>Scoring Summary</h1>
      					</header>
      					
      					<div className="sub-module mini-score">
      						<table>
      							<thead>
      								<tr>
      									<th className="network">{comp.broadcasts.length && comp.broadcasts[0].media.shortName}</th>
              					{headerScoreTHs}
              					<th className="final-score">T</th>
      								</tr>
      							</thead>
      							<tbody>
      								{headerScores}
      							</tbody>
      						</table>
      					</div>
      					
      					<table>
      						<tbody>
      							{scoringSummary}
      						</tbody>
      					</table>
      				</div>
      				<footer className="button-container">
      					<div className="grid-row">
      						<a className="view-more webview-internal">Full Play-by-Play</a>
      					</div>
      				</footer>
      			</div>
      		</div>
      	</article>
      </div>
		)
  }
};