import { useState, useEffect, useCallback } from 'react';

function Alert() {
  const [enteredEmail, setEnteredEmail] = useState('');
  const [enteredPassword, setEnteredPassword] = useState('');

  function updateEmailHandler(event) {
    setEnteredEmail(event.target.value);
  }

  function updatePasswordHandler(event) {
    setEnteredPassword(event.target.value);
  }

  const validateEmail = useCallback(
    function () {
      if (!enteredEmail.includes('@')) {
        console.log('Błędny adres e-mail!');
      }
    },
    [enteredEmail]
  );

  useEffect(
    function () {
      validateEmail();
    },
    [validateEmail]
  );

  return (
    <form>
      <div>
        <label>Adres e-mail</label>
        <input type="email" onChange={updateEmailHandler} />
      </div>
      <div>
        <label>Hasło</label>
        <input type="password" onChange={updatePasswordHandler} />
      </div>
      <button>Zapisz</button>
    </form>
  );
}

export default Alert;
