/*
* https://frontendeval.com/questions/multi-step-form
*
* Create a single submittable form that spans multiple screens
*/

const App = () => {
  const [name, setName] = React.useState("");
  const [email, setEmail] = React.useState("");
  const [dateOfBirth, setDateOfBirth] = React.useState("");
  const [password, setPassword] = React.useState("");
  const [stage, setStage] = React.useState(0);
  
  const pages = [];
  
  pages[0] = (
    <section>
      <label htmlFor="name">Name:</label><br/>
      <input id="name" onChange={(event) => setName(event.target.value)} value={name}/><br/>
      <button onClick={ () => {
          if (name)
            setStage(stage+1);
          else
            alert("Please input your name");
        } }>
          Next
      </button>
    </section>
  );
  
  pages[1] = (
    <section>
      <a href="#" onClick={() => setStage(stage-1)}>&lt; Back</a><br/><br/>
      <label htmlFor="email">Email:</label><br/>
      <input id="email" htmlType="email" onChange={(event) => setEmail(event.target.value)} value={email} /><br/>
      <button onClick={ () => {
          if ( email && /^\S+@\S+\.\S+$/.test(email) )
            setStage(stage+1);
          else
            alert("Please input a correct email");
        } }>
          Next
      </button>
    </section>
  );
  
  pages[2] = (
    <section>
      <a href="#" onClick={() => setStage(stage-1)}>&lt; Back</a><br/><br/>
      <label htmlFor="dob">Date of Birth: (mm/dd/yy)</label><br/>
      <input id="dob" type="date" onChange={(event) => setDateOfBirth(event.target.value)} value={dateOfBirth} placeholder="mm/dd/yy" /><br/>
      <button onClick={ () => {
          if ( dateOfBirth )
            setStage(stage+1);
          else
            alert("Please input your date of birth");
        } }>
          Next
      </button>
    </section>
  );
  
  pages[3] = (
    <section>
      <a href="#" onClick={() => setStage(stage-1)}>&lt; Back</a><br/><br/>
      <label htmlFor="password">Date of Birth: (mm/dd/yy)</label><br/>
      <input id="password" type="password" onChange={(event) => setPassword(event.target.value)} value={password} /><br/>
      <button onClick={ () => {
          if ( password )
            setStage(stage+1);
          else
            alert("Please input your password");
        } }>
          Next
      </button>
    </section>
  );
  
  pages[3] = (
    <section>
      Thank you. You have completed your sign up.
    </section>
  )
  
  return (
    <section>
      { pages[stage] }
    </section>
  );
}

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