'use client'
import { signInWithEmailAndPassword } from "firebase/auth";
import Link from "next/link";
import { auth } from "../../services/firebase";

export default function Hello() {
  let email = ''
  let isValidEmail = ''
  let setIsValidEmail = ''
  let password = ''
  let isValidPassword = ''
  let setIsValidPassword = ''
  let setIsPasswordVisible = ''
  let se

  const emailValidation = () => {
    const emailRegex = /^(([^<>()[\]\.,;:\s@\"]+(\.[^<>()[\]\.,;:\s@\"]+)*)|(\".+\"))@(([^<>()[\]\.,;:\s@\"]+\.)+[^<>()[\]\.,;:\s@\"]{2,})$/i;
    if (!email || emailRegex.test(email) === false) {
      setIsValidEmail(false);
      return false;
    }
    setIsValidEmail(true);
    return true;
  };

  const passwordValidation = () => {
    const passwordRegex = /^(?=.*[A-Z])(?=.*\d)(?=.*[!@#$%^&*()_+])[A-Za-z\d!@#$%^&*()_+]{8,}$/i;

    if (!password || passwordRegex.test(password) === false) {
      setIsValidPassword(false)
      return false
    }
    setIsValidPassword(true)
    return true
  }

  const debounce = fn => {
    let id = null;

    return (...args) => {
      if (id) {
        clearTimeout(id);
      }
      id = setTimeout(() => {
        fn(...args);
        id = null;
      }, 300);
    };
  };

  const loginUser = () => {
    if (isValidEmail && isValidPassword) {
      signInWithEmailAndPassword(auth, email, password)
        .then(data => {console.log(data.user)
        
          console.log('User signed in successfully!');
          router.push('/browse');
        }) 
          // Navigate to the home screen or other desired screen
        .catch(error => {
          console.error(error);
          // Display an error message to the user
        });
    }
  };

  return (
    <div className='text-white flex flex-col items-center justify-center h-screen'>
      <h1 className='text-2xl font-bold mb-6'>Login</h1>
      <form className='w-64' >
        <div className='mb-4'>
          <label htmlFor='email' className='block font-medium mb-1'>Email:</label>
          <input type="email" id='email' className='text-black w-full px-3 py-2 border rounded'/>
        </div>
        <div className='mb-4'>
          <label htmlFor="password" className='block font-medium mb-1'>Password:</label>
          <input type='password' id='password' className='text-black w-full px-3 py-2 border rounded'/>
        </div>
            <button type="submit" className='w-full py-2 bg-red-600 text-white font-medium rounded'>
              Login
            </button>
      </form>

       <div className="mt-4">
         Don't have an account?{' '}
               <Link href='../register' className="w-[128px] h-[128px] rounded-xl overflow-hidden bg-white">
                 <p>Create account</p>
               </Link>
       </div>

       <div className="mt-2">
         Forgot your password?{' '}
               <Link href='../password-recovery' className="w-[128px] h-[128px] rounded-xl overflow-hidden bg-white">
                 <p>Recover</p>
               </Link>
       </div>
    </div>
  );
}