import React from 'react';
import { dispatch } from '../../../domain/gameStore';
import { hasSavedGameInfo } from '../../../domain/localStorageMethods';
import DelayedButton from '../../util/DelayedButton';
import GameCreationForm from '../../util/GameCreationForm';
import styles from './HomePage.module.css';

const Rejoin = () => (
  <div className={styles.rejoinGame}>
    <span className={styles.rejoinGameLabel}>Looks like you were in a game before that you didn't finish!</span>
    <DelayedButton onEnd={() => dispatch.rejoinGame()} countDownFormatter={(rem) => `Rejoining in ${rem}s...`}>
      Rejoin Game?
    </DelayedButton>
  </div>
);

export default () => (
  <div className={styles.homePage}>
    <GameCreationForm afterCreate={(gameId) => dispatch.goToLobby(gameId)} />
    {hasSavedGameInfo() && <Rejoin />}
  </div>
);