import React from 'react';
import { Form, Input, Button, Row, Col } from 'antd';
import { UserOutlined, LockOutlined } from '@ant-design/icons';
import './login-component.css';
import logo from '../../../images/logo.png';
import { loginUser, useAuthState } from '../auth-context';
import { useNavigate } from 'react-router-dom';


export const LoginComponent = () => {
    const { dispatch } = useAuthState();
    const navigate = useNavigate();

    const handleLogin = async (values: any) => {
        try {
            let response = await loginUser(dispatch, values)
            if (response.user) {
                navigate("/dashboard", { replace: true });
                window.location.reload();
            }
            
        } catch (error) {
            console.log(error)
        }
    };

    return (
        <div>
            <div className="bg-img">
                <div className="login">
                    <div className="imgcontainer">
                        <div style={{borderRadius:'50%'}}><img src={logo} alt='SAI LOGO' width='70px' height='30px'/> </div><h2>APEE</h2>
                    </div>
                    <Form
                        className="container"
                        onFinish={handleLogin}
                    >
                        <Form.Item
                            name="username"
                            rules={[
                                {
                                    required: true,
                                    message: 'Please input your Username!',
                                }
                            ]}
                        >
                            <Input prefix={<UserOutlined className="site-form-item-icon" />} placeholder="Username" autoComplete="off" />
                        </Form.Item>


                        <Form.Item
                            name="password"
                            rules={[
                                {
                                    required: true,
                                    message: 'Please input your Password!',
                                },
                            ]}
                        >
                            <Input.Password
                                prefix={<LockOutlined className="site-form-item-icon" />}
                                type="Password"
                                placeholder="Password"
                                autoComplete="off"
                            />
                        </Form.Item>
                        <Form.Item>
                            <Row justify='space-between'>
                                {/* <Col><a href='#/forgotpassword'>
                                Forgot Password
                                </a></Col> */}

                                <Col><a href='#/signup'>
                                SignUp
                                </a></Col>
                            </Row>
                        </Form.Item>
                        <Form.Item>
                            <Button type="primary" htmlType="submit" className="login-form-button ">
                                Log in
                            </Button>
                        </Form.Item>
                    </Form>
                </div>
            </div></div>
    )
}

export default LoginComponent;