import { useEffect } from 'react'
import styles from './App.module.css'
import { useWizard } from './api/useWizard'
import { Toasts } from './components/Toasts/Toasts'
import { GameScreen } from './screens/GameScreen/GameScreen'
import { HomeScreen } from './screens/HomeScreen/HomeScreen'
import { LobbyScreen } from './screens/LobbyScreen/LobbyScreen'

const STATUS_MESSAGES = {
  connecting: 'Connecting to the server…',
  closed: 'Connection lost. Reconnecting…',
  replaced: 'This game was opened in another window. Reload the page to continue here.',
  busy: 'The server is full right now. Retrying in a moment…',
} as const

function App() {
  const { status, playerId, lobby, game, completedTrick, serverStatus, toasts, dismissToast, actions } =
    useWizard()
  const lobbyCode = lobby?.code

  // Keep the lobby code in the address bar so the URL can be shared as an invite link.
  useEffect(() => {
    if (lobbyCode) {
      window.history.replaceState(null, '', `?lobby=${lobbyCode}`)
    } else if (status === 'open' && window.location.search) {
      window.history.replaceState(null, '', window.location.pathname)
    }
  }, [lobbyCode, status])

  let screen
  if (!lobby || !playerId) {
    screen = (
      <HomeScreen
        connected={status === 'open'}
        acceptingGames={serverStatus.accepting_games}
        actions={actions}
      />
    )
  } else if (lobby.status === 'waiting' || !game) {
    screen = (
      <LobbyScreen
        lobby={lobby}
        playerId={playerId}
        acceptingGames={serverStatus.accepting_games}
        actions={actions}
      />
    )
  } else {
    screen = (
      <GameScreen
        lobby={lobby}
        game={game}
        playerId={playerId}
        completedTrick={completedTrick}
        actions={actions}
      />
    )
  }

  return (
    <div className={styles.app}>
      {status !== 'open' && <div className={styles.banner}>{STATUS_MESSAGES[status]}</div>}
      {screen}
      <Toasts toasts={toasts} onDismiss={dismissToast} />
    </div>
  )
}

export default App