import React, { useState } from 'react';
import './LoginForm.css';
import './App.css'

function LoginForm() {
  const [loginVisible, setLoginVisible] = useState(true);
  const [registerVisible, setRegisterVisible] = useState(false);
  const [passwordVisible, setPasswordVisible] = useState(false);

  const toggleLogin = () => {
    setLoginVisible(true);
    setRegisterVisible(false);
    setPasswordVisible(false);
  };

  const toggleRegister = () => {
    setRegisterVisible(true);
    setLoginVisible(false);
    setPasswordVisible(false);
  };

  const toggleRecuperar = () => {
    setPasswordVisible(true);
    setLoginVisible(false);
    setRegisterVisible(false);
  };

  
  return (
    <>
      <div className="wrapper">
        <div className="form-box">  
          
          <div className="login-container" id="login" style={{ left: loginVisible ? '4px' : '-510px', opacity: loginVisible ? 1 : 0 }}>
            <form>  
              <div className="top">
                <span>No tienes cuenta? <a href="#" onClick={toggleRegister}>Registrate</a></span>
                <header>Inicia Sesión</header>
              </div>
              <div className="input-box">
                <input type="text" className="input-field" placeholder="Correo" />
                <i className="bx bx-user"></i>
              </div>
              <div className="input-box">
                <input type="password" className="input-field" placeholder="Contraseña" />
                <i className="bx bx-lock-alt"></i>
              </div>
              <div className="input-box">
                {/*<input type="submit" className="submit" value="Entrar" />*/}
                <button type="button" className="submit">Entrar</button>
              </div>
              <div className="two-col">
                <div className="one">
                  <input type="checkbox" id="login-check" />
                  <label htmlFor="login-check"> Recuerdame</label>
                </div>
                <div className="two">
                  <span><a href="#" onClick={toggleRecuperar}>Olvidaste la contraseña?</a></span>
                </div>
              </div>
            </form>
            
          </div>
          
          <div className="register-container" id="register" style={{ right: loginVisible || passwordVisible ? '-520px' : '5px', opacity: loginVisible || passwordVisible ? 0 : 1 }}>
            <form>  
              <div className="top">
                <span>Ya tienes cuenta? <a href="#" onClick={toggleLogin}>Inicia Sesión</a></span>
                <header>Registrarse</header>
              </div>
              <div className="two-forms">
                <div className="input-box">
                  <input type="text" className="input-field" placeholder="Nombre" />
                  <i className="bx bx-user"></i>
                </div>
                <div className="input-box">
                  <input type="text" className="input-field" placeholder="Apellido" />
                  <i className="bx bx-user"></i>
                </div>
              </div>
              <div className="input-box">
                <input type="text" className="input-field" placeholder="Correo" />
                <i className="bx bx-envelope"></i>
              </div>
              <div className="input-box">
                <input type="password" className="input-field" placeholder="Contraseña" />
                <i className="bx bx-lock-alt"></i>
              </div>
              <div className="input-box">
                {/*<input type="submit" className="submit" value="Registrarse"/>*/}
                <button type="button" className="submit">Registrarse</button>
              </div>
              <div className="two-col">
                <div className="one">
                  <input type="checkbox" id="register-check" />
                  <label htmlFor="register-check"> Recuerdame</label>
                </div>
              </div>
            </form>
          </div>
          
          <div className="password-container" id="password" style={{ right: loginVisible || registerVisible ? '-520px' : '5px', opacity: loginVisible || registerVisible ? 0 : 1 }}>
            <form>  
              <div className="top2">
                <span>Ya tienes cuenta? <a href="#" onClick={toggleLogin}>Inicia Sesión</a></span>
                <header>Recuperar Contraseña</header>
              </div>
              <div className="input-box">
                <input type="text" className="input-field" placeholder="Correo" />
                <i className="bx bx-envelope"></i>
              </div>
              <div className="input-box">
                <input type="password" className="input-field" placeholder="Nueva contraseña" />
                <i className="bx bx-lock-alt"></i>
              </div>
              <div className="input-box">
                {/*<input type="submit" className="submit" value="Cambiar contraseña" />*/}
                <button type="button" className="submit">Cambiar contraseña</button>
              </div>
            </form>
          </div>
          
        </div>
      </div>
    </>
  );
}

export default LoginForm;