import React, { Component } from 'react';

export default class LeaderCard extends Component {
  constructor(props) {
    super();
  }
  
  render() {
    const {leaders, teams} = this.props;
      
    let leaderData = [];
    for (const li in leaders[0].leaders) {
        leaderData.push(
        	<div key={li} className="leader-column">
        		<div className="grid-row">
        			<div className="headline">
        				<h3>{leaders[0].leaders[li].displayName}</h3>
        			</div>
        			
        			{[leaders[0].leaders[li].leaders[0], leaders[1].leaders[li].leaders[0]].map((leader, lii) => {
        			  const athlete = leader.athlete,
        			        headshot = athlete.headshot,
        			        headshotHref = athlete.hasOwnProperty('headshot') ? athlete.headshot.href : null;
        			        
        			        console.log('athlete', athlete);
        			  return (
            			<div key={lii} className={((lii === 0) ? 'away' : 'home') + '-leader'}>
            				<div className="grid-row">
            					<div className="player-image">
            						<span className="headshot-md athlete">
            						  <img src={headshotHref ? 'https://a.espncdn.com/combiner/i?img=' + headshotHref.substr(headshotHref.indexOf('/i/')) + '&h=102&scale=crop&w=102' : ''} />
            						</span>
            						<b className="player-team">{teams[lii].abbreviation}</b>
            					</div>
            					<div className="player-detail">
            						<span className="player-name" title={athlete.fullName}>{athlete.shortName}</span>
            						<span className="player-stats">{leader.displayValue}</span>
            					</div>
            				</div>
            			</div>
          			)
        			})}
        		</div>
        	</div>
        );
        console.log(leaders[0].leaders[li].displayName, leaders[0], leaders[1]);
    }
    
    return (
      <article className="sub-module leaderMod current-leaders">
    		<header className="bordered">
    		  <h1>Game Leaders</h1>
    		</header>
    		<div className="content">
    			<div className="leader-container">
    			  <div className="grid-row leader-content">{leaderData}</div>
    			</div>
    			<footer className="button-container">
    				<div className="grid-row">
    				  <a className="view-more webview-internal">Full Box Score</a>
    				</div>
    			</footer>
    		</div>
    	</article>
    )
  }
}