import React, { useEffect, useState} from 'react';

import { Form, Input, Button, Checkbox } from 'antd';

import _auth from '@netuno/auth-client';

import { Redirect } from "react-router-dom";

import Core from "../../Core";

import './index.less';

const layout = {
    labelCol: { span: 8 },
    wrapperCol: { span: 16 },
};
const tailLayout = {
    wrapperCol: { offset: 8, span: 16 },
};

export default ()=> {
    const [loading, setLoading] = useState(false);

    const onFinish = (values) => {
        setLoading(true);
        _auth.login({
            username: values.username,
            password: values.password,
            success: ()=> {
                setLoading(false);
                if (values.remember) {
                    localStorage.setItem("login", JSON.stringify(values));
                } else {
                    localStorage.removeItem("login");
                }
                Core.events.login();
                //window.location = '/main';
            },
            fail: ()=> {
                setLoading(false);
                alert("Fail.");
            }
        });
    };

    const onFinishFailed = (errorInfo) => {
        console.log('Failed:', errorInfo);
    };
    
    let initialValues = {
        remember: true,
    };
    if (localStorage.getItem("login")) {
        initialValues = JSON.parse(localStorage.getItem("login"));
    }
    if (_auth.isLogged()) {
        return <Redirect to="/main" />;
    }
    return (
        <div className="login">
            <h1>Login</h1>
            <div className="login__form">
                <Form
                    {...layout}
                    name="basic"
                    initialValues={initialValues}
                    onFinish={onFinish}
                    onFinishFailed={onFinishFailed}
                    >
                    <Form.Item
                        label="Usuário"
                        name="username"
                        rules={[
                        {
                            required: true,
                            message: 'Por favor preencha o seu usuário.',
                        },
                        ]}
                    >
                        <Input />
                    </Form.Item>

                    <Form.Item
                        label="Senha"
                        name="password"
                        rules={[
                        {
                            required: true,
                            message: 'Por favor preencha o seu senha.',
                        },
                        ]}
                    >
                        <Input.Password />
                    </Form.Item>

                    <Form.Item {...tailLayout} name="remember" valuePropName="checked">
                        <Checkbox>Relembrar o acesso.</Checkbox>
                    </Form.Item>

                    <Form.Item {...tailLayout}>
                        <Button type="primary" htmlType="submit" loading={loading}>
                        Entrar
                        </Button>
                    </Form.Item>
                </Form>
            </div>
        </div>
    );
};
