import { useState } from 'react';
import useKetchup from 'ketchup-react'
import { addPlayerAction, reducer, removePlayerAction, resetAction } from 'wonders-common'
import './App.css';
import Game from '../Game/Game';
import UserSelector from '../UserSelector/UserSelector';
import 'bootstrap/dist/css/bootstrap.min.css';
import Container from 'react-bootstrap/Container';
import Row from 'react-bootstrap/Row'

export default function App() {
  const [state, dispatch] = useKetchup('ws://localhost:4000', reducer)

  const [user, setUser] = useState<string>()
  function selectUser(name?: string) {
    setUser(name)
    if (name && !state?.players.some(p => p.name === name)) {
      dispatch(addPlayerAction(name))
    }
  }
  function removeUser() {
    if (user !== undefined) {
      dispatch(removePlayerAction(user))
      setUser(undefined)
    }
  }

  function resetGame() {
    dispatch(resetAction())
    setUser(undefined)
  }

  return <Container fluid>
    <UserSelector user={user} selectUser={selectUser} removeUser={removeUser} users={state?.players.map(p => p.name) ?? []} locked={state !== undefined && state.stage !== 'starting'} />
    {state
      ? <>
        <Game state={state} dispatch={dispatch} playerName={user} />
        <button onClick={() => window.confirm('Reset game?') && resetGame()}> Reset</button>
      </>
      : <Row>Loading...</Row>
    }
  </Container>
}