/*
* https://frontendeval.com/questions/rolling-dice
*
* Create a dice roller application that can roll anywhere from 1-99 six-sided dice
*/
const DiceFaceOne = () => (<svg viewBox="0 0 448 512" width="100" title="dice-one">
  <path d="M384 32H64C28.65 32 0 60.65 0 96v320c0 35.35 28.65 64 64 64h320c35.35 0 64-28.65 64-64V96c0-35.35-28.65-64-64-64zM224 288c-17.67 0-32-14.33-32-32s14.33-32 32-32 32 14.33 32 32-14.33 32-32 32z" />
</svg>);

const DiceFaceTwo = () => (<svg viewBox="0 0 448 512" width="100" title="dice-two">
  <path d="M384 32H64C28.65 32 0 60.65 0 96v320c0 35.35 28.65 64 64 64h320c35.35 0 64-28.65 64-64V96c0-35.35-28.65-64-64-64zM128 192c-17.67 0-32-14.33-32-32s14.33-32 32-32 32 14.33 32 32-14.33 32-32 32zm192 192c-17.67 0-32-14.33-32-32s14.33-32 32-32 32 14.33 32 32-14.33 32-32 32z" />
</svg>);

const DiceFaceThree = () => (<svg viewBox="0 0 448 512" width="100" title="dice-three">
  <path d="M384 32H64C28.65 32 0 60.65 0 96v320c0 35.35 28.65 64 64 64h320c35.35 0 64-28.65 64-64V96c0-35.35-28.65-64-64-64zM128 192c-17.67 0-32-14.33-32-32s14.33-32 32-32 32 14.33 32 32-14.33 32-32 32zm96 96c-17.67 0-32-14.33-32-32s14.33-32 32-32 32 14.33 32 32-14.33 32-32 32zm96 96c-17.67 0-32-14.33-32-32s14.33-32 32-32 32 14.33 32 32-14.33 32-32 32z" />
</svg>);

const DiceFaceFour = () => (<svg viewBox="0 0 448 512" width="100" title="dice-four">
  <path d="M384 32H64C28.65 32 0 60.65 0 96v320c0 35.35 28.65 64 64 64h320c35.35 0 64-28.65 64-64V96c0-35.35-28.65-64-64-64zM128 384c-17.67 0-32-14.33-32-32s14.33-32 32-32 32 14.33 32 32-14.33 32-32 32zm0-192c-17.67 0-32-14.33-32-32s14.33-32 32-32 32 14.33 32 32-14.33 32-32 32zm192 192c-17.67 0-32-14.33-32-32s14.33-32 32-32 32 14.33 32 32-14.33 32-32 32zm0-192c-17.67 0-32-14.33-32-32s14.33-32 32-32 32 14.33 32 32-14.33 32-32 32z" />
</svg>);

const DiceFaceFive = () => (<svg viewBox="0 0 448 512" width="100" title="dice-five">
  <path d="M384 32H64C28.65 32 0 60.65 0 96v320c0 35.35 28.65 64 64 64h320c35.35 0 64-28.65 64-64V96c0-35.35-28.65-64-64-64zM128 384c-17.67 0-32-14.33-32-32s14.33-32 32-32 32 14.33 32 32-14.33 32-32 32zm0-192c-17.67 0-32-14.33-32-32s14.33-32 32-32 32 14.33 32 32-14.33 32-32 32zm96 96c-17.67 0-32-14.33-32-32s14.33-32 32-32 32 14.33 32 32-14.33 32-32 32zm96 96c-17.67 0-32-14.33-32-32s14.33-32 32-32 32 14.33 32 32-14.33 32-32 32zm0-192c-17.67 0-32-14.33-32-32s14.33-32 32-32 32 14.33 32 32-14.33 32-32 32z" />
</svg>);

const DiceFaceSix = () => (<svg viewBox="0 0 448 512" width="100" title="dice-six">
  <path d="M384 32H64C28.65 32 0 60.65 0 96v320c0 35.35 28.65 64 64 64h320c35.35 0 64-28.65 64-64V96c0-35.35-28.65-64-64-64zM128 384c-17.67 0-32-14.33-32-32s14.33-32 32-32 32 14.33 32 32-14.33 32-32 32zm0-96c-17.67 0-32-14.33-32-32s14.33-32 32-32 32 14.33 32 32-14.33 32-32 32zm0-96c-17.67 0-32-14.33-32-32s14.33-32 32-32 32 14.33 32 32-14.33 32-32 32zm192 192c-17.67 0-32-14.33-32-32s14.33-32 32-32 32 14.33 32 32-14.33 32-32 32zm0-96c-17.67 0-32-14.33-32-32s14.33-32 32-32 32 14.33 32 32-14.33 32-32 32zm0-96c-17.67 0-32-14.33-32-32s14.33-32 32-32 32 14.33 32 32-14.33 32-32 32z" />
</svg>);


const Dice = ({ shouldRoll }) => {
  let initialCalculate = Math.round(Math.random() * 6);
  const [currentFace, setCurrentFace] = React.useState(initialCalculate === 0 ? 1: initialCalculate);
  
  React.useEffect(() => {
    if (shouldRoll) {
      let calculation = Math.round(Math.random() * 6);
      setCurrentFace(calculation === 0 ? 1: calculation);
    }
  }, [shouldRoll]);
  
  if (currentFace === 1) {
    return <DiceFaceOne />;
  } else if (currentFace === 2) {
    return <DiceFaceTwo />;
  } else if (currentFace === 3) {
    return <DiceFaceThree />;
  } else if (currentFace === 4) {
    return <DiceFaceFour />;
  } else if (currentFace === 5) {
    return <DiceFaceFive />;
  } else if (currentFace === 6) {
    return <DiceFaceSix />;
  }
}
const App = () => {
  const [numberOfDices, setNumberOfDices] = React.useState(0);
  const [roll, setRoll] = React.useState(false);
  return <div class="mainContainer">
    <div class="inputContainer">
      <label>Number of dice</label>
      <input type="number" onChange={(e) => {
          const currentValue = Number(e.target.value);
          console.log("currentValue>>", currentValue);
          if (currentValue < 1 || currentValue > 99) {
            setNumberOfDices((s) => s);
          };
          setNumberOfDices(Number(e.target.value));
        }} />
      <button onClick={() => {
          setRoll((s) => !s);
          setTimeout(() => {
            setRoll((s) => !s);
          }, 500);
        }}>
         Roll
      </button>
    </div>
    <div class="diceContainer">
    {Array(numberOfDices).fill(0).map((_item) => {
      return <Dice shouldRoll={roll} />
    })}
    </div>
  </div>;
}

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