/*
* https://frontendeval.com/questions/rolling-dice
*
* Create a dice roller application that can roll anywhere from 1-99 six-sided dice
*/

const rollNumberOfDice = (numberOfDiceToRoll) => {
  var results = []
  for(let i=0; i < numberOfDiceToRoll; i++){
    results.push(Math.floor(Math.random() * 6 + 1))
  }
  return results;
}

const Dice = ({eyes}) => {
  
  if(eyes <= 3){
    return <div class={`dice dice-${eyes}`}>
      {[... Array(eyes).keys()].map(el => <div class="eye"/>)}
    </div>
  }
  if(eyes === 4){
    return <div class="dice dice-4">
      <div>
        <div class="eye"/>
        <div class="eye"/>
      </div>
      <div>
        <div class="eye"/>
        <div class="eye"/>
      </div>    
    </div>
  }
  else if(eyes === 5){
    return <div class="dice dice-5">
      <div>
        <div class="eye"/>
        <div class="eye"/>
      </div>
      <div>
        <div class="eye"/>
      </div>
      <div>
        <div class="eye"/>
        <div class="eye"/>
      </div>    
    </div>
  }
  else if(eyes === 6){
        return <div class="dice dice-6">
      <div>
        <div class="eye"/>
        <div class="eye"/>
        <div class="eye"/>
      </div>
      <div>
        <div class="eye"/>
        <div class="eye"/>
        <div class="eye"/>
      </div>    
    </div>
  }
}

const App = () => {
  const [formValue, setFormValue] = React.useState();
  const [diceValues, setDiceValues] = React.useState();
  const [rolled, setRolled] = React.useState(false);
  
  const handleClick = () => {
    if(!formValue){
      alert("You need to set number of dice, otherwise we cannot roll.")
    }
    else if(formValue < 1 || formValue > 100){
        alert("You need to throw between 1 to 99 dice")
      }
    else{
      setDiceValues(rollNumberOfDice(formValue))
    }
  }
  return <div class="main">
    <h3>Number of dice</h3>
    <input class="dice-input" placeholder="e.g. 63" type="number" value={formValue} onChange={e=>setFormValue(e.target.value)}/>
    <button onClick={handleClick} class="rollbutton">Roll</button>
    <div class="dice-container">
      {diceValues && diceValues.map((val, idx) => {
        return <Dice eyes={val}/>
      })}
    </div>
  </div>
}

ReactDOM.render(<App />, document.getElementById('app'));