import { useForm, Head } from '@inertiajs/react';
import toast, { Toaster } from 'react-hot-toast';
import { useEffect, useRef } from 'react';
import $ from 'jquery';

export default function Login() {
    const { data, setData, post, processing, errors } = useForm({
        email: '',
        password: '',
    });

    // Refs to store references to the inputs
    const emailInputRef = useRef(null);
    const passwordInputRef = useRef(null);

    // Maintain focus and bubble effect on input
    useEffect(() => {
        // jQuery bubble effect on form input
        const handleFocus = (e) => {
            $(e.target).parents('.form-gp').addClass('focused');
        };

        const handleBlur = (e) => {
            // Add 'focused' class only if input contains value, otherwise remove it
            if (!e.target.value) {
                $(e.target).parents('.form-gp').removeClass('focused');
            }
        };

        // Bind the event handlers
        $('#exampleInputEmail1, #exampleInputPassword1')
            .on('focus', handleFocus)
            .on('blur', handleBlur);

        // Cleanup the event listeners on unmount
        return () => {
            $('#exampleInputEmail1, #exampleInputPassword1')
                .off('focus', handleFocus)
                .off('blur', handleBlur);
        };
    }, []);

    function submit(e) {
        e.preventDefault();
        // Validate data before submission
        if (!data.email) {
            toast.error("Email is required, Please enter email");
            return;
        }
        if (!data.password) {
            toast.error("Password required, Please enter password");
            return;
        }
        post('/');
    }

    return (
        <div className="login-area">
            <Toaster position='bottom-right' />
            <div className="container">
                <div className="login-box ptb--100">
                    <form onSubmit={submit} method='POST' action="{{ route('login') }}">
                        <div className="login-form-head">
                            <h4>Sign In</h4>
                            {/* <img src="/assets/images/logo/africaner_logo.png" /> */}
                        </div>
                        <div className='alert-items'>
                            {errors.message &&
                                <div className="alert alert-danger">{errors.message}</div>}
                        </div>
                        <div className="login-form-body">
                            <div className="form-gp">
                                <label htmlFor="exampleInputEmail1">Email address</label>
                                <input
                                    type="email"
                                    id="exampleInputEmail1"
                                    autoFocus=""
                                    value={data.email}
                                    onChange={e => setData('email', e.target.value)}
                                    ref={emailInputRef} 
                                />
                                <i className="ti-email"></i>
                                <div className="text-danger"></div>
                            </div>
                            <div className="form-gp">
                                <label htmlFor="exampleInputPassword1">Password</label>
                                <input
                                    type="password"
                                    id="exampleInputPassword1"
                                    value={data.password}
                                    onChange={e => setData('password', e.target.value)}
                                    ref={passwordInputRef} 
                                />
                                <i className="ti-lock"></i>
                                <div className="text-danger"></div>
                            </div>
                            <div className="submit-btn-area">
                                <button id="form_submit" type="submit" disabled={processing}>Submit <i className="ti-arrow-right"></i></button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    );
}
