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 StartOver = () => {
  return (
    <div className="col-sm-12" style={styles.space}>
      <Link to="/playerOne">
        <button type="button" className="btn btn-lg btn-danger">Start over</button>
      </Link>
    </div>
  );
};

const Results = (props) => {
  if (props.isLoading) {
    return (
      <p> LOADING </p>
    );
  }

  if (props.scores[0] === props.scores[1]) {
    return (
      <MainContainer>
        <h1>It's a tie</h1>
        <StartOver path="/playerOne" />
      </MainContainer>
    );
  }

  const winningIndex = props.scores[0] > props.scores[1] ? 0 : 1;
  const losingIndex = winningIndex ? 0 : 1;

  return (
    <MainContainer>
      <h1>Results</h1>
      <div className="col-sm-8 col-sm-offset-2">
        <UserDetailsWrapper header="Winner">
          <UserDetails score={props.scores[winningIndex]} info={props.playerInfo[winningIndex]} />
        </UserDetailsWrapper>
        <UserDetailsWrapper header="Loser">
          <UserDetails score={props.scores[losingIndex]} info={props.playerInfo[losingIndex]}  />
        </UserDetailsWrapper>
      </div>

      <StartOver />
    </MainContainer>
  );
};

Results.propTypes = {
  isLoading: PropTypes.bool.isRequired,
  playerInfo: PropTypes.array.isRequired,
  scores: PropTypes.array.isRequired
};

export default Results;