import React from 'react';
import { logIn } from '@lib/redux/actions/auth-actions';
import { Form, Checkbox, Button, Modal, Input } from 'antd';
import { UserOutlined, LockOutlined } from '@ant-design/icons';
import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';
import { hideGlobalLogin } from '@lib/redux/actions/global-helpers-actions';


const
	GlobalLogin = ({ globalLogin, logIn, hideGlobalLogin, status }: { globalLogin?: { show: boolean }, hideGlobalLogin?: Function, logIn: Function, status: object }) => {

		const onFinish = values => logIn({ email: values.email, password: values.password });

		const cancelHandler = () => hideGlobalLogin();

		return (
			<Modal onCancel={cancelHandler} title="You need to login first" visible={globalLogin?.show} footer={[<Button key={1} type='default' onClick={cancelHandler}>Cancel</Button>]}>
				<Form name="normal_login" className="login-form" initialValues={{ remember: true }} onFinish={onFinish}>
					<Form.Item name="email" rules={[{ required: true, message: 'Please input your username or email' }]}>
						<Input prefix={<UserOutlined className="site-form-item-icon" />} placeholder="Email or username" />
					</Form.Item>
					<p className='text-danger'>{status?.error?.email?.join('<br />')}</p>
					<Form.Item
						name="password"
						rules={[{ required: true, message: 'Please input your password!' }]}
					>
						<Input
							prefix={<LockOutlined className="site-form-item-icon" />}
							type="password"
							placeholder="Password"
						/>
					</Form.Item>
					<p className='text-danger'>{status?.error?.password?.join('<br />')}</p>
					<Form.Item>
						<Button type="primary" htmlType="submit" className="login-form-button" block>
							Log in
						</Button>
						Or <a href="/register">register now!</a>
					</Form.Item>
				</Form>
			</Modal>
		);
	},
	mapStateToProps = state => state,
	mapDispatchToProps = dispatch => bindActionCreators({
		logIn, hideGlobalLogin
	}, dispatch);



export default connect(mapStateToProps, mapDispatchToProps)(GlobalLogin);