import { useState } from 'react';

import Validation from './Validation';
import classes from './Signup.module.css';

function Signup() {
  const [email, setEmail] = useState('');
  const [confirmEmail, setConfirmEmail] = useState('');
  const [password, setPassword] = useState('');
  const [showDetails, setShowDetails] = useState(false);

  function toggleDetailsHandler() {
    setShowDetails((isShowing) => !isShowing);
  }

  function signupHandler(event) {
    event.preventDefault();
  }

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

  function updateConfirmEmailHandler(event) {
    setConfirmEmail(event.target.value);
  }

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

  return (
    <>
      <form onSubmit={signupHandler}>
        <div className="form-control">
          <label htmlFor="email">Adres e-mail</label>
          <input id="email" type="email" onChange={updateEmailHandler} />
        </div>
        <div className="form-control">
          <label htmlFor="confirm-email">Potwierdź adres e-mail</label>
          <input
            id="confirm-email"
            type="email"
            onChange={updateConfirmEmailHandler}
          />
        </div>
        <div className="form-control">
          <label htmlFor="password">Hasło</label>
          <input
            id="password"
            type="password"
            onChange={updatePasswordHandler}
          />
        </div>
        <button className='main-btn'>Utwórz konto</button>
      </form>
      <section>
        <button className='alt-btn' onClick={toggleDetailsHandler}>
          {showDetails ? 'Mniej' : 'Więcej'} informacji
        </button>
        {showDetails && (
          <div className={classes.details}>
            <p>
              Te dane są potrzebne do utworzenia konta. Będą używane wyłącznie
              do uwierzytelniania.
            </p>
            <p>Nie będą wykorzystywane do celów marketingowych ani żadnych innych.</p>
          </div>
        )}
      </section>
      <Validation
        email={email}
        confirmEmail={confirmEmail}
        password={password}
      />
    </>
  );
}

export default Signup;
