import React from "react";
import { Link } from "react-router";
import styles from "../styles/";
import MainContainer from "../containers/MainContainer";
import UserDetails from "../components/UserDetails";
import UserDetailsWrapper from "../components/UserDetailsWrapper";

const PropTypes = React.PropTypes;

const ConfirmBattle = (props) => {
  return props.isLoading === true
    ? <p>LOADING</p>
    : (
    <MainContainer>
      <h1>Confirm Players</h1>
      <div className="col-sm-8 col-sm-offset-2">
        <UserDetailsWrapper header="Player One">
          <UserDetails info={props.playerInfo[0]} />
        </UserDetailsWrapper>
        <UserDetailsWrapper header="Player Two">
          <UserDetails info={props.playerInfo[1]} />
        </UserDetailsWrapper>
      </div>
      <div className="col-sm-8 col-sm-offset-2">
        <div className="col-sm-12" style={styles.space}>
          <button type="button" className="btn btn-lg btn-success" onClick={props.onInitiateBattle}>
            Initiate Battle!</button>
        </div>
        <div className="col-sm-12" style={styles.space}>
          <Link to="playerOne">
            <button type="button" className="btn btn-lg btn-danger">Reselect players!</button>
          </Link>
        </div>
      </div>
    </MainContainer>
  );
};

ConfirmBattle.propTypes = {
  onInitiateBattle: PropTypes.func.isRequired,
  isLoading: PropTypes.bool.isRequired,
  playerInfo: PropTypes.array.isRequired
};

export default ConfirmBattle;