/* eslint no-param-reassign: 0 */
import React, { Component, Fragment } from 'react';

import TeamPanel from './team-panel.jsx';
import GamePanel from './game/game-panel.jsx';
import AthletePanel from './athlete-panel.jsx';
import SportSelector from './sport-selector.jsx';
import AlternateAthleteSelector from './alternate-athlete-selector.jsx';
import SpeechProcessor from './speech-processor.jsx';

const defaultAthlete = {displayJersey: '', displayDraft: '', status: {name: ''}, team: {name: '', displayName: '', logos: [{href: ''}], color: '#000'}, statsSummary: {statistics: []}};
const defaultDbAthlete = {id: '', name: {first: '', last: '', display: ''}, position: '', jersey: '', height: 0, weight: 0, dateofbirth: '', college: ''};

export default class Demo extends Component {
  constructor(props) {
    super();
    this.state = {
      currentAthlete: defaultAthlete,
      dbAthlete: defaultDbAthlete,
      subject: null,
      alternateAthletes: null,
      contracts: {}
    };
    
    this.changeSubject = this.changeSubject.bind(this);
    this.setAltAthletes = this.setAltAthletes.bind(this);
    this.resetAthlete = this.resetAthlete.bind(this);
    this.fetchPlayer = this.fetchPlayer.bind(this);
    this.showTeam = this.showTeam.bind(this);
    this.showGame = this.showGame.bind(this);
  }
  
  componentDidMount() {
    const leagues = ['nba', 'nfl', 'mlb'];
    
    for (let league of leagues) {
      fetch('https://devbydylan.com/sports/php/data/' + league + '/contracts.json')
      .then(resp => resp.json())
      .then(json => {
        this.state.contracts[league] = json;
      });
    }
  }
  
  changeSubject(newSubject) {
    this.setState({subject: newSubject});
  }
  
  resetAthlete() {
    this.setState({ currentAthlete: defaultAthlete, dbAthlete: defaultDbAthlete, alternateAthletes: null, gameId: null});
  }
  
  setAltAthletes(altAthletes) {
    this.setState({alternateAthletes: altAthletes});
  }
  
  showTeam(team) {
    console.log('showteam', team);
    this.setState({currentAthlete: defaultAthlete, currentTeam: team, gameId: null})
  }
  
  showGame(gameId, sport, league) {
    console.log('showgame', gameId, sport, league);
    this.setState({currentAthlete: defaultAthlete, currentTeam: null, gameData: {id: gameId, sport: sport, league: league}});
  }
  
  fetchPlayer(playerId, playerSport, playerLeague) {
    console.log('call fetchPlayer', playerId, playerSport, playerLeague);
    const url = (playerSport && playerLeague) ? 'https://site.web.api.espn.com/apis/common/v3/sports/' + playerSport + '/' + playerLeague + '/athletes/' + playerId
                                              : 'https://site.web.api.espn.com/apis/common/v3/sports/' + playerLeague + '/athletes/' + playerId;
    fetch(url, { cache: 'force-cache' })
  	.then(resp => resp.json())
  	.then(json => {
  	  if (json && json.athlete) {
  	    json.athlete.leagueInfo = json.league;
  	    json.athlete.leagueInfo.lowerAbbr = playerLeague;
  	    json.athlete.season = json.season;
    	  //console.log(json.athlete);
    	  this.setState({currentAthlete: json.athlete, currentTeam: null, gameId: null});
  	  }
  	});
  }

  render() {
    const {
      subject, currentAthlete, dbAthlete, alternateAthletes, contracts, currentTeam, gameData
    } = this.state;
    
    return (
      <Fragment>
        { (currentAthlete.status.name) && <AthletePanel info={currentAthlete} dbInfo={dbAthlete} contracts={contracts} showTeam={this.showTeam} showGame={this.showGame} /> }
        
        { (currentTeam) && <TeamPanel team={currentTeam} contracts={contracts} fetchPlayer={this.fetchPlayer} showTeam={this.showTeam} showGame={this.showGame} /> }
        
        { (gameData) && <GamePanel id={gameData.id} sport={gameData.sport} league={gameData.league} fetchPlayer={this.fetchPlayer} showTeam={this.showTeam} showGame={this.showGame} /> }
        
        <SportSelector subject={subject} changeSubject={this.changeSubject} />
              
        <SpeechProcessor
          fetchPlayer={this.fetchPlayer}
          subject={subject}
          changeSubject={this.changeSubject}
          setAlts={this.setAltAthletes}
          resetAthlete={this.resetAthlete}
          hasAthlete={!!currentAthlete.status.name || currentTeam || gameData}
          teamName={!!currentAthlete.team ? currentAthlete.team.displayName : null}
          showTeam={this.showTeam}
          showGame={this.showGame}
        />
        
        { alternateAthletes &&
          <AlternateAthleteSelector fetchPlayer={this.fetchPlayer} setAlts={this.setAltAthletes} altAthletes={alternateAthletes} />
        }
      </Fragment>
    );
  }
};