const App = () => {
  const [page, setPage] = React.useState(1);
  const [state, setState] = React.useState({
    name: "",
    email: "",
    date: "",
    password: ""
  });

  const handleChange = (e) => {
    const { value, name } = e.target;
    setState((prev) => {
      return {
        ...prev,
        [name]: value
      };
    });
  };

  const nextPage = () => {
    setPage((prev) => {
      if (prev === 4) return prev;
      else {
        return prev + 1;
      }
    });
  };
  const prevPage = () => {
    setPage((prev) => {
      if (prev === 1) return prev;
      else {
        return prev - 1;
      }
    });
  };

  const handleSubmit = (e) => {
    e.preventDefault();
    const { name, email, date, password } = state;
    if (name === "" || email === "" || date === "" || password === "") {
      alert(`Please fill all the fields `)
      return
    }
    const newValue = structuredClone({ name, email, date, password });
    alert(`Successfully Submitted ${JSON.stringify(newValue)}`);
    setPage(5)
  };

  const renderForm = (pageId) => {
    switch (pageId) {
      case 1:
        return (
          <div className="form-container">
            <label htmlFor="name">Name</label>
            <input
              type="text"
              id="name"
              name="name"
              onChange={handleChange}
              value={state.name}
            />
          </div>
        );
        break;
      case 2:
        return (
          <div className="form-container">
            <label htmlFor="email">Email</label>
            <input
              type="email"
              id="email"
              name="email"
              onChange={handleChange}
              value={state.email}
              required
              pattern="+.@gmail\.com"
            />
          </div>
        );
        break;
      case 3:
        return (
          <div className="form-container">
            <label htmlFor="date">Date</label>
            <input
              type="date"
              id="date"
              name="date"
              onChange={handleChange}
              value={state.date}
            />
          </div>
        );
        break;
      case 4:
        return (
          <div className="form-container">
            <label htmlFor="password">Password</label>
            <input
              type="password"
              id="password"
              name="password"
              onChange={handleChange}
              value={state.password}
            />
          </div>
        );
        break;
      case 5:
        const { name, email, date, password } = state;
        
        return <div className="form-container">
          <h1>Success!!</h1>
          <br/>
          <br/>
          <div>Details</div>
          <hr/>
          <br/>
          <span>Name: {name}</span>
          <br/>
          <span>Email: {email}</span>
          <br/>
           <span>Date: {date}</span>
          <br/>
           <span>Password: {password}</span>
        </div>
    }
  };
  return (
    <section className="App">
      <header>
        {page === 1 ? (
          <div></div>
        ) : page === 5 ? "":(
          <a className="back-btn" href="#" onClick={prevPage}>
            &#60;  back
          </a>
        )}
      </header>
      {renderForm(page)}
      <footer>
        {page === 4 ? (
          <button className="btn-primary" onClick={handleSubmit}>submit</button>
        ) : page === 5 ? "":(
          <button className="btn-primary" onClick={nextPage}>next</button>
        )}
      </footer>
    </section>
  );
};

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