const { useEffect, useState } = React;

const DIE_FACES = [
  ['center'],
  ['top-right', 'bottom-left'],
  ['top-right', 'center', 'bottom-left'],
  ['top-left', 'top-right', 'bottom-left', 'bottom-right'],
  ['top-left', 'top-right', 'center', 'bottom-left', 'bottom-right'],
  ['top-left', 'top-right', 'center-left', 'center-right', 'bottom-left', 'bottom-right'],
];

const generateDice = (quantity) => {
  const NUM_SIDES = 6;
  
  let emptyDiceArray = new Array(quantity);
  return emptyDiceArray.fill().map(_ => Math.ceil(Math.random() * NUM_SIDES));
}

const DiceForm = ({ onSubmit }) => {
  const [numDice, setNumDice] = useState(undefined);
  
  const handleSubmit = (e) => {
    e.preventDefault();
    
    if (!numDice) {
      return;
    }
    
    onSubmit(numDice);
  }
  
  return (
    <form className="dice-form" onSubmit={handleSubmit}>
      <label>
        Number of dice
        <input type="number" min="1" max="99" onChange={(e) => setNumDice(Number(e.target.value))}/>
      </label>
      <button type="submit" disabled={!numDice}>Roll</button>
    </form>
  );
}

const Die = ({ value }) => {
  const dots = DIE_FACES[value - 1];
  return (
    <div className={`die face-${value}`}>
      <div className="dot-container">
        {dots.map(dotPosition => <div className={`dot ${dotPosition}`} />)}
      </div>
    </div>
  );
}

const Dice = ({ values }) => {
  return (
    <div className="dice-container">
      {values.map(value => <Die value={value} />)}
    </div>
  );
}

const App = () => {
  const [diceValues, setDiceValues] = useState(new Array(3).fill(6));
  const handleDiceFormSubmit = (numDice) => {
    setDiceValues(generateDice(numDice));
  }
  
  return (
    <div className="container">
      <DiceForm onSubmit={handleDiceFormSubmit} />
      <Dice values={diceValues} />
    </div>
  );
}

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