import React, { useEffect, useState } from 'react';
import { useLocation } from 'react-router-dom';
import loader from '../../../../assets/images/loading.gif';
import errorImg from '../../../../assets/images//illustration/IllustrationForgot.png';
import checkEmail from '../../../../assets/images//illustration/emptyStudent.png';
import useValidate from '../hooks/useValidate';

const ValidateEmail = () => {
    const { validateEmail, error } = useValidate();
    const [ isTokenAvailable, setIsTokenAvailable ] = useState(true);
    const useQuery = () => {
        return new URLSearchParams(useLocation().search);
    };
    
    const TOKEN = useQuery().get('token');
    
    useEffect(() => {
        if (TOKEN) {
            validateEmail(TOKEN);
            console.log('good');
        } else {
            console.log('No TOKEN found in the URL.');
            setIsTokenAvailable(false);
        }
    }, [TOKEN]);
    
  return (
    <>
        {isTokenAvailable ?(
            error ?(
                <div style={{backgroundColor:"#edf5ff"}} className='h-screen w-screen d-flex flex-column justify-content-center align-items-center'>
                    <img src={errorImg} alt="" className='h-50 mb-2'/>
                    <h2 style={{color:"#4b84ca"}}>{error}</h2>
                </div>
            ):(
                <div style={{backgroundColor:"#edf5ff"}} className='h-screen w-screen d-flex flex-column justify-content-center align-items-center'>
                    <img src={loader} alt=""/>
                    <h2 style={{color:"#4b84ca"}}>Validating....</h2>
                </div>
            )
        ):(
            <div style={{backgroundColor:"#edf5ff"}} className='h-screen w-screen d-flex flex-column justify-content-center align-items-center'>
                <img src={checkEmail} alt="" className='h-50 mb-2'/>
                <h3 style={{color:"#4b84ca"}}>check your email for validation</h3>
            </div>
        )}
    </>
  );
};

export default ValidateEmail;
