import React, { Component } from 'react'
import {
  Text,
  View,
  FlatList,
  ActivityIndicator
} from 'react-native'
import { connect } from 'react-redux'
import Header from './Header'
import GameCell from './GameCell'
import NBA from '../../utils/nba'

class ScoresScreen extends Component<Props> {

  constructor() {
    super()

    this.nba = new NBA()
    this.state = {
      date: null,
      loading: true,
      games: {},
      linescore: []
    }
  }

  componentWillReceiveProps(props) {
    if (props.date != this.state.date) {
      this.setState({
        loading: true
      })
    }
  }

  componentDidMount () {
    this.fetchGames()
  }

  componentDidUpdate() {
    this.fetchGames()
  }

  shouldComponentUpdate(props, nextProps) {
    return this.state.date != props.date
  }

  fetchGames = () => {
    this.nba.getGames({
      gameDate: this.props.date
    })
    .then((games) => {
      let linescores = games.LineScore
      let gameInfo = games.GameHeader
      this.setState({
        loading: false,
        date: this.props.date,
        games: games,
        linescore: this._combineGames(linescores, gameInfo)
      })
    })
    .catch((error) => {
      console.log(error)
    })
  }

  // games are returned as a array of objects for each team playing that day
  // even index => home team
  // odd index => away team
  _combineGames(games, info) {
    let combined = []
    let infoIndex = 0
    games.forEach((team, index) => {
      if (index % 2 === 0) {
        let obj = {
          home: team,
          away: games[index+1],
          gameInfo: info[infoIndex] // relying on data is in order
        }
        combined.push(obj)
        infoIndex++
      }
    })
    return combined
  }

  render() {
    return (
      <View style={{flex: 1}}>
        <Header />
        <View style={{ flex: 1, backgroundColor: '#000000' }}>
          {
            this.state.loading &&
            <ActivityIndicator
              size="large"
              color="#F7971E"
            />
          }
          {
            (this.state.games && !this.state.loading) &&
            <FlatList
              data={this.state.linescore}
              keyExtractor={game => game.home.game_id}
              renderItem={(teams) => (
                <GameCell
                  teams={teams}
                />
              )}
            />
          }
        </View>
      </View>
    )
  }
}

function mapStateToProps(state) {
  return {
    date: state.date.date,
    season: state.date.season
  }
}

function mapDispatchToProps(dispatch) {
  return {

  }
}

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(ScoresScreen)

@@ -1911,24 +1911,112 @@
 .loading &&%0A
+            %3CView style=%7B%7B flex: 1, justifyContent: 'center', alignItems: 'center'%7D%7D%3E%0A  
             
@@ -2048,16 +2048,18 @@
         
+  
 size=%22la
@@ -2063,16 +2063,18 @@
 %22large%22%0A
+  
         
@@ -2095,16 +2095,18 @@
 F7971E%22%0A
+  
         
@@ -2104,32 +2104,52 @@
              /%3E%0A
+            %3C/View%3E%0A
           %7D%0A    
@@ -2332,16 +2332,116 @@
 ame_id%7D%0A
+              refreshing=%7Bthis.state.loading%7D%0A              onRefresh=%7B() =%3E %7B this.fetchGames() %7D%7D%0A
         

add pull to refresh