import React from 'react';
import { connect } from 'react-redux';
import { Subject } from 'rxjs';
import { Link } from 'react-router-dom';
import { logIn } from '@lib/redux/actions/auth-actions';
import { bindActionCreators } from 'redux';
// import Helmet from '@lib/helmet';
// import { GuardSpinner } from 'react-spinners-kit';
import { notification, Row, Col, Form, Input, Button, Typography, Avatar, Space } from 'antd';
import loginimg from '@assets/images/signup.jpg';
import { UserOutlined } from '@ant-design/icons';
import Helmet from '@lib/helmet';
import ForgotPassword from '@components/forgot-password';


const
	Login = ({ logIn, status, location }: { logIn?, status?, location?}) => {
		const
			[loginFormData, setLoginFormData] = React.useState({
				email: '',
				password: ''
			}),
			formInput = new Subject();

		formInput.subscribe(e => {
			const
				{ target: { name, value } }: Record<string, any> = e,
				newLoginFormData = loginFormData;
			newLoginFormData[name] = value;
			setLoginFormData({ ...newLoginFormData });
		});

		const onFinish = payload => logIn(payload, location?.state?.rdr);

		React.useEffect(() => {
			if (location?.state?.rdr) notification.warning({
				message: location?.state?.rdr.message?.title,
				description: location?.state?.rdr.message?.description,
			});
		}, []);

		React.useEffect(() => {
			setTimeout(() => {
				status?.isloggedin ? window.location.href = location?.state?.rdr.path ?? '/' : null;
			}, 2e3);
		}, [status]);

		// {status?.isloggingin
		// 	? (
		// 		<div style={loader.styles}>
		// 			<GuardSpinner size={30} color="#686769" loading={true} />
		// 		</div>
		// 	)
		// 	: null}

		const helmet = {
			styles: '.footer-area{display: none;}',
			pageUrl: '/login',
			pageTitle: process.env.APP_NAME + ' | LOGIN'
		};


		return (
			<>
				<Helmet {...helmet}></Helmet>
				<section className='log'>
					<div className="container log-hol">
						<Row>
							<Col className='lg1 d-none d-md-block' xs={{ span: 24 }} md={{ span: 12 }}>
								<img src={loginimg} alt="" />
							</Col>
							<Col className='lg2 container text-center' xs={{ span: 24 }} md={{ span: 12 }}>
								<Form onFinish={onFinish}>
									<Space direction='vertical' size={50}>
										<Space direction='vertical' size={10}>
											<Avatar size={100} icon={<UserOutlined />} />
											<Typography.Title level={1} style={{ fontSize: '20px', fontWeight: 500 }} className='font-2'>Login to your account</Typography.Title>
										</Space>
										<Row gutter={[12, 0]} className='justify-content-center'>
											<Col span={24} className='mb-20'>
												<a href="/auth/google" target='_blank' className="btn btn-sm btn-primary">
													<i className="fab fa-google pr-1"></i>
													<span>Sign in with Google</span>
												</a>
											</Col>
											<Col sm={{ span: 24 }} md={{ span: 12 }} style={{ width: '100%' }}>
												<Form.Item noStyle className='w-100'>
													<Form.Item rules={[{ required: true }]} name='email'>
														<Input size='large' placeholder='Email or Username' type='text' />
													</Form.Item>
													<p className='text-danger'>{status?.error?.email?.join('<br />')}</p>
												</Form.Item>
											</Col>
											<Col sm={{ span: 24 }} md={{ span: 12 }} style={{ width: '100%' }}>
												<Form.Item noStyle>
													<Form.Item rules={[{ required: true }]} name='password'>
														<Input.Password size='large' placeholder='Password' />
													</Form.Item>
													<p className='text-danger'>{status?.error?.password?.join('<br />')}</p>
												</Form.Item>
											</Col>
											<Col span={24}>
												<Form.Item style={{ display: 'd-flex', justifyContent: 'center' }}>
													<Button loading={status?.isloggingin} type='primary' htmlType='submit' style={{ background: '#3db83a', borderColor: '#3db83a', width: '200px' }}>
													Log in to your account
													</Button>
												</Form.Item>
												<Form.Item>
													<span style={{ color: '#1890ff', cursor: 'pointer' }} className="login-form-forgot">
														<ForgotPassword />
													</span>
												</Form.Item>
												<Form.Item>
													<Link className="login-form-forgot" to='/register'>
														Create An Account
													</Link>
												</Form.Item>
											</Col>
										</Row>
									</Space>
								</Form>
							</Col>
						</Row>
					</div>
				</section>


			</>
		);
	},
	mapStateToProps = state => state,
	mapDispatchToProps = dispatch => bindActionCreators({
		logIn
	}, dispatch);


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