import React, {Component} from "react";
import {Button, Form, Input, message} from "antd";
import {apiLogin} from "../../services/API/API";
import {LockOutlined, UserOutlined} from "@ant-design/icons";
import './Form.less'

class LoginForm extends Component {
    handleSubmitLogin = values => {
        console.log('Received values of form: ', values);
        let params = {
            ...values
        }
        apiLogin(params).then(res => {
            if (res.data.code === 1001) {
                message.success(res.data.message);
            } else {
                message.error(res.data.message)
            }
        })
    };

    render() {
        return (
            <Form onSubmit={this.handleSubmitLogin} className="login-form" initialValues={{remember: true}}>
                <Form.Item
                    name="account"
                    rules={[{required: true, message: 'Please input your Username or E-mail!'}]}
                >
                    <Input
                        prefix={<UserOutlined className="site-form-item-icon"/>}
                        placeholder="Username or E-mail"
                        size="large"
                    />
                </Form.Item>
                <Form.Item
                    name="password"
                    rules={[{required: true, message: 'Please input your Password!'}]}
                >
                    <Input
                        prefix={<LockOutlined className="site-form-item-icon"/>}
                        type="password"
                        placeholder="Password"
                        size="large"
                    />
                </Form.Item>
                <Form.Item style={{marginBottom: '10px'}}>
                    <Button size="large" type="primary" htmlType="submit" className="login-form-button"
                            style={{width: '100%'}}>
                        LOGIN
                    </Button>
                </Form.Item>
                <Form.Item style={{marginBottom: '0'}}>
                    <Button type="link" block style={{textAlign: 'right'}} onClick={() => {
                        this.props.handleLoginStatus('forget')
                    }}>
                        FORGET YOUR PASSWORD？
                    </Button>
                </Form.Item>
            </Form>
        )
    }
}

export default LoginForm;