var possibleCombinationSum = function(arr, n) {
  if (arr.indexOf(n) >= 0) { return true; }
  if (arr[0] > n) { return false; }
  if (arr[arr.length - 1] > n) {
    arr.pop();
    return possibleCombinationSum(arr, n);
  }
  var listSize = arr.length, combinationsCount = (1 << listSize)
  for (var i = 1; i < combinationsCount ; i++ ) {
    var combinationSum = 0;
    for (var j=0 ; j < listSize ; j++) {
      if (i & (1 << j)) { combinationSum += arr[j]; }
    }
    if (n === combinationSum) { return true; }
  }
  return false;
};

const Stars = (props) => {
  return (
    <div className="col-5">
      {_.range(props.numberOfStars).map(i =>
        <i key={i} className="fa fa-star"></i>
      )}
    </div>
  );
};

const Button = (props) => {
  let button;
  switch(props.answerIsCorrect){
  	case true:
    button =
    	<button className="btn btn-success" onClick = {props.acceptAnswer}>
      <i className="fa fa-check"></i>
      </button>;
      break;
		case false:
    button =
    	<button className="btn btn-danger" >
      <i className="fa fa-times"></i>
      </button>;
      break;
    default:
    	button = <button className="btn" onClick = {props.checkAnswer}
      disabled = {props.selectedNumbers.length === 0}>=</button>;
      break;
  }
  return (
    <div className="col-2 text-center">
      {button}
      <br /><br />
      <button className="btn btn-warning btn-sm" onClick={props.withdraw} disabled={props.withdraws === 0}>
      	<i className="icon-refresh"></i>
        {props.withdraws}
      </button>
    </div>
  );
};

const Answer = (props) => {
  return (
    <div className="col-5">
      {props.selectedNumbers.map((number, i) =>
        <span key={i} onClick={() => props.unSelectedNumber(number)}>{number}</span>
      )}
    </div>
  );
};

const Numbers = (props) => {
  const numberClassName = (number) => {
  	if (props.usedNumbers.indexOf(number) >= 0) {
      return 'used';
    }
    if (props.selectedNumbers.indexOf(number) >= 0) {
      return 'selected';
    }
  };
  return (
    <div className="card text-center">
      <div>
        {Numbers.list.map((number, i) =>
          <span key={i} className={numberClassName(number)}
                onClick={() => props.selectNumber(number)}>
            {number}
          </span>
        )}
      </div>
    </div>
  );
};

const DoneFrame = (props) => {
  return(
    <div className="text-center">
    	<h2>{props.gameStatus}</h2>
      <button className="btn btn-secondary" onClick={props.resetGame}>Play Again </button>
    </div>
  );
};

Numbers.list = _.range(1, 10);

class Game extends React.Component {
	static randomNumberOfStars = () => 1 + Math.floor(Math.random()*9);
  static initialState = () => ({
  selectedNumbers: [],
    usedNumbers: [],
    randomNumberOfStars: Game.randomNumberOfStars(),
    answerIsCorrect: null,
    withdraws: 5,
    gameStatus: null,
  });

  state = Game.initialState();

  selectNumber = (clickedNumber) => {
    if (this.state.selectedNumbers.indexOf(clickedNumber) >= 0) { return; }
    this.setState(prevState => ({
    	answerIsCorrect: null,
      selectedNumbers: prevState.selectedNumbers.concat(clickedNumber)
    }));
  };

  unSelectedNumber = (clickedNumber) => {
  	this.setState(prevState => ({
    answerIsCorrect: null,
    selectedNumbers: prevState.selectedNumbers.filter(number => number !== clickedNumber)
    }));
  };

  checkAnswer = () => {
  	this.setState(prevState => ({
    	answerIsCorrect: prevState.randomNumberOfStars ===
      prevState.selectedNumbers.reduce((acc, n) => acc + n, 0)
    }));
  };

  acceptAnswer = () => {
  	this.setState((prevState => ({
    usedNumbers: prevState.usedNumbers.concat(prevState.selectedNumbers),
    selectedNumbers: [],
    answerIsCorrect: null,
    randomNumberOfStars: Game.randomNumberOfStars(),
    })), this.updateDoneStatus)
  };

  withdraw = () => {
  	if(this.state.withdraws === 0) {return; };
  	this.setState(prevState => ({
    	randomNumberOfStars: Game.randomNumberOfStars(),
      answerIsCorrect: null,
      selectedNumbers: [],
      withdraws: prevState.withdraws - 1,
    }), this.updateDoneStatus);
  };

  possibleSolutions = ({randomNumberOfStars, usedNumbers}) => {
  	const possibleNumbers = _.range(1,10).filter(number => usedNumbers.indexOf(number) === -1);
    return possibleCombinationSum(possibleNumbers, randomNumberOfStars);
  };

  updateDoneStatus = () => {
  	this.setState(prevState => {
    	if (prevState.usedNumbers.length===9){
      	return{gameStatus: "GG~~!"}
      }
      if(prevState.withdraws ===0 && !this.possibleSolutions(prevState)) {
      	return{gameStatus: "BG! :("}
      }
    });
  };

  resetGame = () => this.setState(Game.initialState());

  render() {
  const {selectedNumbers, randomNumberOfStars, answerIsCorrect, usedNumbers, withdraws, gameStatus} = this.state;
    return (
      <div className="container">
        <h3>Play Nine</h3>
        <hr />
        <div className="row">
          <Stars numberOfStars={randomNumberOfStars} />
          <Button selectedNumbers={selectedNumbers}
          checkAnswer = {this.checkAnswer}
          answerIsCorrect = {answerIsCorrect}
          acceptAnswer = {this.acceptAnswer}
          withdraw = {this.withdraw}
          withdraws = {withdraws}/>
          <Answer selectedNumbers={selectedNumbers}
          unSelectedNumber = {this.unSelectedNumber}/>
        </div>
        <br />

        <br />
        {gameStatus ?
        <DoneFrame resetGame={this.resetGame} gameStatus = {gameStatus}/>:
				<Numbers selectedNumbers={selectedNumbers}
                 selectNumber={this.selectNumber}
                 usedNumbers={usedNumbers}/>
        }
      </div>
    );
  }
}

class App extends React.Component {
  render() {
    return (
      <div>
        <Game />
      </div>
    );
  }
}

ReactDOM.render(<App />, mountNode);