import { LockOutlined, UserOutlined } from '@ant-design/icons';
import { Button, Form, Input, Typography } from 'antd';
import axios from 'axios';
// import { dispatchBox, dispatchToken } from 'features/Login/loginSlice';
import React, { useState } from 'react';
// import { useDispatch } from 'react-redux';
// import { useHistory } from "react-router-dom";
import { HOST } from '../../config/index';

const { Text } = Typography;

const Login = () => {

    const [error, setError] = useState('');
    const [loading, setLoading] = useState(false);

    // const dispatch = useDispatch();

    // let history = useHistory();

    const onFinish = async (values) => {
        setLoading(true);
        const dataReq = {
            email: values.email,
            password: values.password,
        }

        await axios({
            method: 'POST',
            url: `${HOST}/api/login`,
            headers: {},
            data: dataReq
        }).then((res) => {
            if (res.data.status === 10000) {
                // dispatch(dispatchToken({ token: 'Bearer ' + res.data.access_token }));
                // dispatch(dispatchBox({ rule: res.data.user_info.rule }))
                setError('');
                localStorage.setItem('refresh_token', 'Bearer ' + res.data.refresh_token);
                localStorage.setItem('access_token', 'Bearer ' + res.data.access_token);
                localStorage.setItem('rule', res.data.user_info.rule);
                
                // history.push('/preferential-management')
            } else {
                setError('Sai tài khoản hoặc mật khẩu');
            }
        })
            .catch(err => {
                setError('Vui lòng kiểm tra lại đường truyền mạng')
                console.error(err);
            })
        setLoading(false);
    };

    const onFinishFailed = (errorInfo) => {
        console.log('Failed:', errorInfo);
    };


    return (
        <div className="login__page">
            <div className="login__form">
                <div className="login__sec">
                    <h2 className="login__text">Đăng nhập</h2>
                    <Form
                        layout="vertical"
                        name="normal_login"
                        className="login-form"
                        initialValues={{
                            remember: true,
                        }}
                        onFinish={onFinish}
                        onFinishFailed={onFinishFailed}
                    >
                        <Form.Item
                            name="email"
                            label="Email"
                            rules={[
                                {
                                    required: true,
                                    message: '',
                                },
                            ]}
                        >
                            <Input
                                className="input__Cus"
                                prefix={<UserOutlined className="site-form-item-icon" />}
                                placeholder="Email" />
                        </Form.Item>
                        <Form.Item
                            name="password"
                            label="Mật khẩu"
                            rules={[
                                {
                                    required: true,
                                    message: '',
                                },
                            ]}
                        >
                            <Input.Password
                                className="input__Cus"
                                prefix={<LockOutlined className="site-form-item-icon" />}
                                type="password"
                                placeholder="Password"
                            />
                        </Form.Item>
                        <div className="login__error">
                            {error && <Text strong="true" className="hide__error" type="danger">*  Sai tài khoản mật khẩu </Text>}
                        </div>
                        <Form.Item>
                            <Button
                                type="primary"
                                htmlType="submit"
                                loading={loading}
                                className="login-form-button"
                                >
                                Đăng nhập
                                </Button>
                        </Form.Item>
                    </Form>
                </div>

            </div>

        </div>
    );
}

export default Login;