import { useRef, useState } from 'react';

import classes from './EmailForm.module.css';

function EmailForm() {
  // Bez referencji:
  // const [enteredEmail, setEnteredEmail] = useState('');

  // Z referencjami:
  const emailRef = useRef();

  // Bez referencji:
  // function updateEmailHandler(event) {
  //   setEnteredEmail(event.target.value);
  // }

  function submitFormHandler(event) {
    event.preventDefault();

    // Bez referencji: możesz używać tu stanu enteredEmail

    // Inne rozwiązanie (nie należy go używać!):
    // const emailInputEl = document.getElementById('email');
    // const enteredEmailVal = emailInputEl.value;

    // Z referencjami:
    const enteredEmail = emailRef.current.value;
    // emailRef.current.value = ''; // Nie resetuj wartości w ten sposób!

    // Można przesłać wartość enteredEmail do serwera backendu.
  }

  return (
    <form className={classes.form} onSubmit={submitFormHandler}>
      <label htmlFor="email">Adres e-mail</label>
      <input
        ref={emailRef}
        type="email"
        id="email"
        // onChange={updateEmailHandler}
      />
      <button>Zapisz</button>
    </form>
  );
}

export default EmailForm;
