'use client';
import { useState, useEffect, useContext } from 'react';
import { signInWithEmailAndPassword } from 'firebase/auth';
import { auth } from '../../services/firebase';
import Link from 'next/link';
import { useRouter } from 'next/navigation';
import { AuthContext } from '../components/AuthContext'


const Login = () => {
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');
  const [isValidEmail, setIsValidEmail] = useState(false);
  const [isValidPassword, setIsValidPassword] = useState(false);
  const [isPasswordVisible, setIsPasswordVisible] = useState(true);
  const router = useRouter()
  const user = useContext(AuthContext);

  useEffect(() => {
    // Check if user is authenticated
    if (!user) {
      // Redirect or perform any necessary action
    } else {
      // User is authenticated, continue with desired logic
      router.push('/profiles');
    }
  }, [user]);

  useEffect(() => {
    debounce(emailValidation());
  }, [email]);

  useEffect(() => {
    debounce(passwordValidation());
  }, [password]);

  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('/profiles');

        }) 
          // 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' onSubmit={e => {
        e.preventDefault();
        loginUser();
      }}>
        <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' value={email} onChange={e => setEmail(e.target.value)} />
        </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' value={password} onChange={e => setPassword(e.target.value)} />
        </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>
  );
}
export default Login;