import React, { Component } from 'react';

const dateFormatter = new Intl.DateTimeFormat('en-us', {
  year: 'numeric',
  month: 'long',
  day: 'numeric'
}),
timeFormatter = new Intl.DateTimeFormat('en-us', {
  hour: 'numeric',
  minute: 'numeric',
  hour12: true,
  timeZoneName: 'short'
});

export default class GameHeader extends Component {
  render() {
    const {comp, league, gameNote} = this.props,
          status = comp.status.type.name,
          headerTeams = comp.competitors.sort((a, b) => {
            if (a.homeAway === 'home')
                return 1;
            else
                return -1;
          }).map((competitor, idx) => {
            const team = competitor.team,
                  record = competitor.record,
                  abbr = team.abbreviation;
            return (
              <div key={idx} className={'team ' + competitor.homeAway}>
          			<div className="team__content">
          				<div className="team__banner rendered" style={{backgroundColor: '#' + team.alternateColor}}>
          					<div className="team__banner__wrapper">
          					  <img src={'https://a.espncdn.com/combiner/i?img=/i/teamlogos/' + league + '/500/' + abbr + '.png&amp;h=208&amp;w=208'} />
          					</div>
          				</div>
          				<div className="team-container" style={{order: idx}}>
          					<div className="team-info">
          						<div className="team-info-wrapper">
          						  <span className="team-name tmpLink">
          						    <span className="long-name">{team.location}</span><span className="short-name">{team.name}</span>
          						    <span className="abbrev" title={team.location}>{abbr}</span>
          						  </span>
          						</div>
          						<div className="record">
          						  {record[0].displayValue}
          						  <span className="inner-record">, {record[1].displayValue + ((record[1].type === 'road') ? ' Away' : ' Home')}</span>
          						</div>
          					</div>
          				</div>
          				<div className="score-container">
          					<div className={'score icon-font-' + ((record[1].type === 'road') ? 'after' : 'before')}>{competitor.score}</div>
          				</div>
          			</div>
          		</div>
        		)
    });
    
    
    console.log('game status', status);
    
    let headerScores;
    if (status === 'STATUS_INPROGRESS' || status === 'STATUS_FINAL') {
      headerScores = comp.competitors.map((competitor, idx) => (
        <tr key={idx}>
  				<td className="team-name">{competitor.team.abbreviation}</td>
  				{competitor.linescores.map((ls, iidx) => (
  				  <td key={iidx}>{ls.displayValue}</td>
  				))}
  				<td className="final-score">{competitor.score}</td>
  			</tr>
      ));
    }
    
    let headerClass = 'game-strip game-package ' + league;
    let date;
    
    if (status === 'STATUS_FINAL') {
      const firstCompetitor = comp.competitors[0];
      let winningSide = firstCompetitor.hasOwnProperty('winner') ? 'home' : '';
      if (firstCompetitor.hasOwnProperty('winner') && firstCompetitor.homeAway === 'away' && firstCompetitor.winner)
        winningSide = 'away';
      headerClass += ' post ' + winningSide + '-winner';
    }
    else if (status === 'STATUS_SCHEDULED') {
      date = new Date(comp.date);
      headerClass += ' pre';
    }
    
    return (
      <header className={headerClass} style={{top: 0}}>
        { gameNote && <div className="game-details header">{gameNote}</div> }
      	<div className="competitors" style={{width: 'calc(100% - 116px)'}}>
      		{headerTeams[0]}
      		
      		{(status === 'STATUS_FINAL') ?
        		<div className="game-status">
        			<span className="game-time status-detail">Final</span>
        			<div id="gamepackage-linescore-wrap">
        				<table id="linescore" className="miniTable">
        					<thead>
        						<tr>
        							<th className="network">{comp.broadcasts.length && comp.broadcasts[0].media.shortName}</th>
        							{comp.competitors[0].linescores.map((ls, idx) => (<th key={idx}>{idx+1}</th>))}
        							<th className="final-score">T</th>
        						</tr>
        					</thead>
        					<tbody>
        						{headerScores[0]}
        						{headerScores[1]}
        					</tbody>
        				</table>
        			</div>
        		</div>
      		: (status === 'STATUS_SCHEDULED') ?
      		  <div className="game-status">
            	<span className="network">{comp.broadcasts.length && comp.broadcasts[0].media.shortName}</span>
            	<span>
            		<span className="game-date">{dateFormatter.format(date)}</span>
            		<span className="game-time time status-detail">{timeFormatter.format(date).replace('S', '')}</span>
            	</span>
            	<div id="gamepackage-linescore-wrap"></div>
            </div>
          : null
      		}
      		
      		{headerTeams[1]}
      	</div>
      </header>
    )
  }
}