import { useState } from 'react';

function validateEmail(enteredEmail) {
  // W praktyce można przesyłać wprowadzony adres e-mail do API backendu, aby sprawdzać, czy użytkownik o danym adresie już istnieje.
  // Tu symuluję taki proces przez opakowanie fikcyjnej logiki sprawdzania poprawności w nakładkę typu Promise.

  const promise = new Promise(function (resolve, reject) {
    if (enteredEmail === 'test@test.com') {
      reject(new Error('Podany adres e-mail już istnieje'));
    } else {
      resolve();
    }
  });

  return promise;
}

function validatePassword(enteredPassword) {
  if (enteredPassword.trim().length < 6) {
    throw new Error('Błędne hasło - musisz użyć przynajmniej 6 znaków.');
  }
}

function App() {
  const [emailIsValid, setEmailIsValid] = useState(true);
  const [passwordIsValid, setPasswordIsValid] = useState(true);
  const [modalData, setModalData] = useState(null);

  async function validateInputHandler(inputType, event) {
    const enteredValue = event.target.value;

    let validationFn = validateEmail;
    if (inputType === 'password') {
      validationFn = validatePassword;
    }

    let isValid = true;

    try {
      await validationFn(enteredValue);
    } catch (error) {
      isValid = false;
    }

    if (inputType === 'email') {
      setEmailIsValid(isValid);
    } else {
      setPasswordIsValid(isValid);
    }
  }

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

    let title = 'Wystąpił błąd!';
    let message = 'Błędne wartości wejściowe - sprawdź wprowadzone dane.';

    if (emailIsValid && passwordIsValid) {
      title = 'Powodzenie!';
      message = 'Konto zostało utworzone!';
    }

    setModalData({
      title: title,
      message: message,
    });
  }

  function closeModal() {
    setModalData(null);
  }

  return (
    <>
      {modalData && <div className='backdrop' onClick={closeModal}></div>}
      {modalData && (
        <aside className='modal'>
          <header>
            <h2>{modalData.title}</h2>
          </header>
          <section>
            <p>{modalData.message}</p>
          </section>
          <section className='modal__actions'>
            <button onClick={closeModal}>OK</button>
          </section>
        </aside>
      )}
      <header>
        <h1>Tworzenie nowego konta</h1>
      </header>
      <main>
        <form onSubmit={submitFormHandler}>
          <div className='form-control'>
            <label htmlFor='email'>Adres e-mail</label>
            <input
              type='email'
              id='email'
              onBlur={validateInputHandler.bind(null, 'email')}
            />
            {!emailIsValid && <p>Ten adres e-mail jest już zajęty!</p>}
          </div>
          <div className='form-control'>
            <label htmlFor='password'>Hasło</label>
            <input
              type='password'
              id='password'
              onBlur={validateInputHandler.bind(null, 'password')}
            />
            {!passwordIsValid && (
              <p>Hasło musi mieć przynajmniej 6 znaków!</p>
            )}
          </div>
          <button>Utwórz konto</button>
        </form>
      </main>
      <footer>
        <p>(c) Maximilian Schwarzmüller</p>
        <p>
          To tylko przykład. Nie jest to kompletna
          działająca witryna.
        </p>
      </footer>
    </>
  );
}

export default App;
