import '@/styles/Login.scss';
import { Button, Form, InputGroup } from 'react-bootstrap';
import { LockKeyhole, User } from 'lucide-react';
import { useDispatch, useSelector } from 'react-redux';
import { useEffect, useState } from 'react';
import { useNavigate } from 'react-router-dom';
import { loginThunk } from '../store/slices/authSlice';

export default function Login() {
    const [formData, setFormData] = useState({
        email: '',
        password: '',
    });
    const { isLoading, isAuthenticated } = useSelector((state) => state.auth);
    const navigate = useNavigate();
    const dispatch = useDispatch();
    const handleChange = (e) => {
        setFormData({ ...formData, [e.target.name]: e.target.value });
    };

    const handleSubmit = (e) => {
        if (!handleValidate()) {
            return;
        }
        e.preventDefault();
        console.log('Form submitted');
        dispatch(loginThunk(formData));
    };

    useEffect(() => {
        if (isAuthenticated) {
            navigate('/');
        }
    }, [isAuthenticated, navigate]);

    const handleValidate = () => {
        if (formData.email === '' || formData.password === '') {
            return false;
        }
        return true;
    };

    return (
        <div className='login-container'>
            <div className='title'>Creator Center</div>
            <Form className='login-form' onSubmit={handleSubmit}>
                {/* <Form.Group>
                    <Form.Label>Username</Form.Label>
                    <InputGroup>
                        <InputGroup.Text>
                            <User />
                        </InputGroup.Text>
                        <Form.Control type='text' placeholder='Enter username' />
                    </InputGroup>
                </Form.Group> */}
                <Form.Group>
                    <Form.Label>Email</Form.Label>
                    <InputGroup>
                        <InputGroup.Text>
                            <User />
                        </InputGroup.Text>
                        <Form.Control
                            required
                            type='email'
                            placeholder='Enter email'
                            name='email'
                            value={formData.email}
                            onChange={handleChange}
                        />
                    </InputGroup>
                </Form.Group>
                <Form.Group>
                    <Form.Label>Password</Form.Label>
                    <InputGroup>
                        <InputGroup.Text>
                            <LockKeyhole />
                        </InputGroup.Text>
                        <Form.Control
                            required
                            type='password'
                            placeholder='Enter password'
                            name='password'
                            value={formData.password}
                            onChange={handleChange}
                        />
                    </InputGroup>
                </Form.Group>
                <Button type='submit' loading={isLoading} disabled={!handleValidate()}>
                    Sign In
                </Button>
            </Form>
        </div>
    );
}