import React, { useState } from "react";
import { Link, useNavigate } from 'react-router-dom';
import errorAlert from '../Helpers/errorAlert';
import isEmpty from 'validator/lib/isEmpty';
import isEmail from 'validator/lib/isEmail';
import {signIn} from '../api/auth';
import { isAuthenticated, setAuthentication } from "../Helpers/auth";


const LoginForm = () => {

    let navigate= useNavigate();

    const[formData, setFormData] = useState({
        email: 'user@gmail.com', 
        password: 'password123',
        errorMsg: false,
    })

    const handleChange = (event) => {
        setFormData({
            ...formData,
            [event.target.name]: event.target.value,
            errorMsg: ''
        })
    }

    const handleSubmit = (event) => {
        event.preventDefault()

        // Form validation
        if (isEmpty(formData.email) || isEmpty(formData.password)) {
            setFormData({
                ...formData, errorMsg: 'All fields are required',
            }) 
        } 
        else if (!isEmail(formData.email)) {
            setFormData({
                ...formData, errorMsg: 'Invalid email',
            })
        } else {

            const {email, password} = formData
            const data = {email, password}

            signIn(data)
                .then(response => {
                    setAuthentication(response.data.token, response.data.user)
                    
                    if (isAuthenticated()) {
                        navigate("/Marketplace")
                        window.location.reload();            
                    }
                })
                .catch(err => {
                    console.log("Login error", err)
                    setFormData({
                        ...formData, 
                        errorMsg: err.response.data.errorMessage
                    })
                })
                   
        }
    }

    return (
        <div className='flex mt-20 items-center justify-center'>
            <div className='bg-white p-12 rounded-md w-1/3 shadow-lg'>
                <h1 className='text-black font-montserrat font-extrabold text-3xl mb-12 ml-3'>Tickcrypt</h1>
                <form className='signup-form space-y-5 px-100' onSubmit={handleSubmit} noValidate>
                    {formData.errorMsg && errorAlert(formData.errorMsg)}
                    <input className='font-montserrat font-medium rounded-full w-full py-4 px-7 shadow-lg' name='email' value={formData.email} type='email' placeholder='Email Address' onChange={handleChange}></input>
                    <input className='font-montserrat font-medium rounded-full w-full py-4 px-7 shadow-lg' name='password' value={formData.password} type='password' placeholder='Password' onChange={handleChange}></input>
                    <button className='py-4 px-14 text-white bg-purple-500 hover:bg-purple-400 font-montserrat font-medium rounded-full' type='submit'>Sign in</button>
                    <div className='mt-6 '>
                        <p className='forgot-password'>
                            <Link to='/ForgotPassword' className='text-gray-400'>Forgot Password?</Link>
                        </p>
                        <div className='mt-4'>
                            <p className='text-gray-400 inline'>
                                Need a Tickcrypt account?
                            </p>
                            <Link to='/SignUp' className=' pl-2 text-purple-500'>Sign up</Link>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    );
};

export default LoginForm;