import React from 'react';
import { useGame } from '../../contexts/GameContext';
import User from './User';

const UserControl = ({ resign }) => {
  const { webPlayer, activePlayer, mines, foundMines, red, blue, onBombToggle } = useGame();
  const activeColor = activePlayer ? 'blue' : 'red';
  const resignClass = 'resign' + (activeColor !== webPlayer ? ' disabled' : '');
  const minesClass = 'active-mines' + (foundMines ? ' found-mine' : '');

  const handleBombClick = (color, player) => {
    const p = 'red' === color ? red : blue;
    if (p.haveBomb && p.enabledBomb && activePlayer === player) {
      onBombToggle();
    }
  };

  return (
    <div className="users">
      <User
        color="blue" webPlayer={webPlayer} {...blue}
        onClickBombSelector={() => handleBombClick('blue', 1)}
      />
      <div className="active-mines-container">
        <i className="fa fa-star" />
        <div className={minesClass}>
          <div className="active-mines-nbr">{mines}</div>
          <div className="active-mines-shine" />
        </div>
        <i className="fa fa-star" />
      </div>
      <div className="clear" />
      <User
        color="red" webPlayer={webPlayer} {...red}
        onClickBombSelector={() => handleBombClick('red', 0)}
      />
      <button className={resignClass} onClick={resign}>
        <div className="resign-shine" />
        Resign
      </button>
    </div>
  );
}

export default UserControl;