import React, { useContext } from 'react';
import Wobler from '../../../components/Wobler';
import { GamesContext } from '../../../context/games';

export default function Surrender({ onClick }) {
    const games = useContext(GamesContext);

    const selectedGame = games.findGame({ uuid: games.active.selectedUUID });
    const gameStatus = selectedGame?.status;
    const isReady = (gameStatus === 'GAME_BOARD_WAIT_FOR_OPPONENT' || gameStatus === 'GAME_BOARD_WAIT_FOR_YOU') ? true : '';

    if (gameStatus === 'DRAW_REQUEST_WAIT_FOR_YOU' || gameStatus === 'DRAW_REQUEST_WAIT_FOR_OPPONENT')
        return; // You shall not surrender if there is an active tie negotiations

    return (
        <button className={'Surrender' + (isReady && ' ready')}
            onClick={() => isReady ? onClick(selectedGame.uuid) : alert('You have to select a game')}
        >
            <Wobler text="Surrender" dance={games.isPushingGameSurrender} />
        </button>
    )
}