import React, { Component, Fragment } from 'react';

export default class GameLeaderTogglePanel extends Component {
  constructor(props) {
    super();
    this.state = {stat: null, stats: [], statIdx: 0};
    this.changeStat = this.changeStat.bind(this);
  }
  
  componentDidMount() {
    const statSrc = this.props.leaders[0].leaders;
    
    this.setState({
      stats: statSrc.map(stat => (stat.displayName)),
      statIdx: 0
    });
  }
  
  changeStat(ev) {
    console.log('click', ev.target, ev.currentTarget);
    this.setState({
      statIdx: this.state.stats.findIndex(stat => stat === ev.currentTarget.textContent)
    });
  }
  
  render() {
    
    const leaderEls = this.props.leaders.map((teamLeaders, idx) => {
      console.log('loop leaders', this.state.statIdx, teamLeaders.leaders[this.state.statIdx].leaders[0]);
      const leaderStat = teamLeaders.leaders[this.state.statIdx].leaders[0],
            athlete = leaderStat.athlete,
            headshotHref = athlete.hasOwnProperty('headshot') ? athlete.headshot.href : null;
      
      return (
  	    <div className={(idx === 0) ? 'first-team' : 'second-team'}>
  				<div className="player-image">
  					<a href="https://www.espn.com/nba/player/_/id/3917376/jaylen-brown">
  						<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>
  					</a>
  				</div>
  				<div className="player-container">
  					<span className="player-name">
  						<a href="https://www.espn.com/nba/player/_/id/3917376/jaylen-brown">
  							<span className="short-name">{athlete.shortName}</span>
  						</a>
  						<div className="details">{athlete.position.abbreviation} - {teamLeaders.team.abbreviation}</div>
  					</span>
  				</div>
  				<dl className="game-leader-details" style={{justifyContent: 'space-around'}}>
  				  {
  				    leaderStat.statistics.map(stat => (
  				      <dd>
  								<span className="value">{stat.displayValue}</span>
  								<span className="label" title={stat.description}>{stat.shortDisplayName}</span>
  							</dd>
  				    ))
  				  }
  				</dl>
  			</div>
  		)
	  })
	  
	  return (
	    <div id="gamepackage-team-leaders">
      	<article className="sub-module game-leaders-module leaderMod basketball equal-height">
      		<header><h1>Game Leaders</h1></header>
      		<div className="content">
      			<div className="leader-container">
      				<div className="leader-content">
      					<div className="filter form-group button-group" data-behavior="tabs">
      					  {
      					    this.state.stats.map((stat, idx) => (
      					      <span className={'button-filter-alt med' + ((idx === this.state.statIdx) ? ' active' : '')} onClick={this.changeStat}>{stat}</span>
      					    ))
      					  }
      					</div>
      
      					<div className="leader-column">
                  {leaderEls}
      					</div>
      				</div>
      			</div>
      			<footer className="button-container">
      				<div className="grid-row">
      					<a name="&amp;lpos=nba:game:post:leaders:fullboxscore" href="/nba/boxscore?gameId=401267378" className="view-more webview-internal">Full Box Score</a>
      				</div>
      			</footer>
      		</div>
      	</article>
      </div>
	  )
  }
}