import React from "react";
import styled from "styled-components";
import { dispatch } from '../../../domain/gameStore';
import { linkGame } from '../../../domain/apiMethods';
import GameCreationForm from '../../util/GameCreationForm';

const LinkedGameContainer = styled.div`
  display: flex;
  justify-content: center;
  margin-top: 1em;
  margin-bottom: 1em;
`

const StyledButton = styled.button`
  margin-top: 0.5em;
`

export default React.memo(({ linkedGame, gameId }) => (
  <LinkedGameContainer>
    {
      linkedGame
        ? <StyledButton onClick={() => dispatch.goToLobby(linkedGame)}>
            Continue to Linked Game Lobby
          </StyledButton>
        : <GameCreationForm afterCreate={linkId => linkGame(gameId, linkId)}/>
    }
  </LinkedGameContainer>
));