//bit.ly/s-pcs
//possible combination logic

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) =>{
//since Stars is children of Game componenet, this will trigger whenever React rerenders, In order to keep same number of stars unless reload button was clicked, this should be moved to parent component which is Game component
//const numberOfStars = Math.floor(Math.random()*9);

// let stars = [];
// for(let k=0; k < numberOfStars; k++){
// stars.push(<i key={k} className ="fa fa-star"></i>);
// }

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" disabled ={props.selectedNumbers.length === 0 } onClick={props.checkAnswer}>=</button>
  	break;
}


return(
<div className="col-2 text-center">
	{button}

  <br /> <br />
  <button className = "btn btn-warning btn-sm" onClick={props.redraw} disabled={props.redraws === 0}>
  	<i className = "fa fa-refresh"></i> {props.redraws}
  </button>
</div>
)
}

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


const Numbers = (props) =>{

	//const arrayOfNumbers = _.range(1,10);
//	{arrayOfNumbers.map((number, i)=><span key ={i}>{number}</span>)}

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>

  )
}

//Every function in javascript is an object
Numbers.list = _.range(1,10);


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

class Game extends React.Component {

static randomNumber = () => 1 + Math.floor(Math.random()*9);

state ={
selectedNumbers : [],
usedNumbers: [],
randomNumbersOfStars: Game.randomNumber(),
answerIsCorrect: null,
redraws: 5,
doneStatus: null
}

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

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

}

/*
match = ()=>{
let value = 0;
this.state.selectedNumbers.forEach(number => value+= number);
if(this.state.randomNumbersOfStars === value){
alert('match');
}else{
alert('not matching');
}
}
*/





checkAnswer = () => {

	this.setState(prevState => ({
  	answerIsCorrect: prevState.randomNumbersOfStars === prevState.selectedNumbers.reduce((acc, n ) => acc + n, 0)

  }))
}


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

}

redraw = () => {
if(this.state.redraws === 0){alert('asdf'); return;}
	this.setState(prevState =>({
  	randomNumbersOfStars: Game.randomNumber(),
    answerIsCorrect: null,
    selectedNumbers: [],
    redraws: prevState.redraws -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 {doneStatus: 'You Won!'}
  }
  if(prevState.redraws === 0 && !this.possibleSolutions(prevState)){
  	return{ doneStatus: 'GameOver!'}
  }
  })
}

reset = () => {
	this.setState({
selectedNumbers : [],
usedNumbers: [],
randomNumbersOfStars: Game.randomNumber(),
answerIsCorrect: null,
redraws: 5,
doneStatus: null
  })

}
render(){
	const { selectedNumbers, raandomNumberOfStars, answerIsCorrect, usedNumbers, redraws, doneStatus } = this.state;

	return (
  	<div className ="container">
    	<h3> Play Nine</h3>
      <hr />
      <div className ="row">
      <Stars numberOfStars = {this.state.randomNumbersOfStars}/>
      <Button checkAnswer = {this.checkAnswer} selectedNumbers = {selectedNumbers} answerIsCorrect = {answerIsCorrect} acceptAnswer = {this.acceptAnswer} redraw = {this.redraw}  redraws = {redraws}/>
      <Answer selectedNumbers = {selectedNumbers} unselectNumber ={this.unselectNumber} />
    </div>
    <br />
    {doneStatus ?
      <DoneFrame doneStatus={doneStatus} reset = {this.reset}/>:
    <Numbers selectedNumbers = {selectedNumbers} selectNumber = {this.selectNumber}  usedNumbers = {usedNumbers}/>
    }


     </div>
  )
}
}



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

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