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

// import NetflixLogo from '../../../public/images/netflix_logo.svg'

const Register = () => {

    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
  }

  // Utility FN · Mover a carpeta utils/utils.js
  const debounce = fn => {
    let id = null;

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


  const registerUser = () => {
        console.log(email);
    console.log(password);
    console.log(isValidEmail);
    console.log(isValidPassword);
  if (isValidEmail && isValidPassword) {
    createUserWithEmailAndPassword(auth, email, password)
        .then(() => {
        console.log('User account created & signed in!');
        // Navigate to the home screen or other desired screen
          router.push('/browse');
      })
      .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'>Register</h1>
      <form className='w-64' onSubmit={e => {
        e.preventDefault();
        registerUser();
      }}>
        <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'>
              Register
            </button>
      </form>

       <div className="mt-4">
         Do you have an account?{' '}
               <Link href='../login' className="w-[128px] h-[128px] rounded-xl overflow-hidden bg-white">
                 <p>Login</p>
               </Link>
       </div>
    </div>
  );
}

export default Register;