import React from 'react';
import User from './user';

class UserControl extends React.Component {
  constructor() {
    super();

    /**
     * activePlayer - red: 0, blue: 1
     * @type {{activePlayer: boolean, mines: number, bombSelected: boolean, foundMines: boolean}}
     */
    this.state = {
      activePlayer: false,
      mines: 51,
      bombSelected: false,
      foundMines: false,
    };
  }

  youCanSelectBomb(activePlayer, clickedPlayer) {
    return this.refs[activePlayer].state.haveBomb
      && this.refs[activePlayer].state.enabledBomb
      && this.state.activePlayer === clickedPlayer;
  }

  onClickBombSelector(clickedPlayer) {
    let activePlayer = this.state.activePlayer ? 'blue' : 'red';

    if (this.youCanSelectBomb(activePlayer, clickedPlayer)) {
      this.state.bombSelected = !this.state.bombSelected;

      if (!this.state.bombSelected) {
        this.props.bombClear();
      }
    }
  }

  getResignClass(webPlayer) {
    let activePlayer = 1 === this.state.activePlayer ? 'blue' : 'red';
    return 'resign' + (webPlayer !== activePlayer ? ' disabled' : '');
  }

  activeMines() {
    return 'active-mines' + (this.state.foundMines ? ' found-mine' : '');
  }

  render() {
    return (
      <div className="users">
        <User
          ref="blue"
          color="blue"
          webPlayer={this.props.webPlayer}
          active={1 === this.state.activePlayer}
          onClickBombSelector={this.onClickBombSelector.bind(this, 1)}
        />
        <div className="active-mines-container">
          <i className="fa fa-star" />
          <div className={this.activeMines()}>
            <div className="active-mines-nbr">{this.state.mines}</div>
            <div className="active-mines-shine" />
          </div>
          <i className="fa fa-star" />
        </div>
        <div className="clear" />
        <User
          ref="red"
          color="red"
          webPlayer={this.props.webPlayer}
          active={0 === this.state.activePlayer}
          onClickBombSelector={this.onClickBombSelector.bind(this, 0)}
        />
        <button className={this.getResignClass(this.props.webPlayer)} onClick={this.props.resign}>
          <div className="resign-shine" />
          Resign
        </button>
      </div>
    );
  }
}

export default UserControl;