import React from 'react'

import GameCard from './GameCard'

export default (props) => {
  const userId = props.userId
  const teams = props.teams
  const games = []
  const gamesObj = props.games
  console.log('teams', teams)
  for (let key in gamesObj) {
    const game = gamesObj[key]
    game.gameKey = key
    game.ownedByCurrentUser = game.owner_id === userId
    games.push(game)
  }
  const fetchingGames = props.fetchingGames
  return (
    <div className='games'>
      {!fetchingGames
        ? (games.length
          ? games.map((game, key) => <GameCard key={key} game={game} homeTeam={teams[game.home_team.key] && teams[game.home_team.key].name || '???'} awayTeam={teams[game.away_team.key] && teams[game.away_team.key].name || '???'} />)
          : <h3>No Games Found</h3>)
        : <h3>Loading Games...</h3>
      }
    </div>
  )
}

@@ -587,18 +587,59 @@
 me%7D 
-homeTeam=%7B
+%0A              homeTeam=%7Bgame.status_initialized ? 
 team
@@ -706,20 +706,90 @@
 ???'
-%7D awayTeam=%7B
+ : teams%5Bgame.home_team%5D.name%7D %0A              awayTeam=%7Bgame.status_initialized ? 
 team
@@ -852,16 +852,45 @@
 %7C%7C '???'
+ : teams%5Bgame.away_team%5D.name
 %7D /%3E)%0A  

Fix game name on Dashboard when not initalised