import React from 'react';
import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';
import { authorizePasswordResetRequest, completeResetPassword } from '@lib/redux/actions/auth-actions';
import { Form, Input, Button, Result } from 'antd';
import { LockOutlined } from '@ant-design/icons';
import { Redirect } from 'react-router-dom';
import { FullScreenLoader } from '@components/loader';
import Helmet from '@lib/helmet';


interface RPI {
	password_reset_request_authorized?,
	complete_password_reset_request?,
	match?,
	status?,
	authorizePasswordResetRequest?,
	completeResetPassword?
}


const
	ResetPasswordComponent = ({ password_reset_request_authorized, complete_password_reset_request, match, status, authorizePasswordResetRequest, completeResetPassword }: RPI) => {
		React.useEffect(() => {
			authorizePasswordResetRequest(match.params.token);
		}, []);

		const onFinish = payload => completeResetPassword({ ...payload, ...password_reset_request_authorized });


		return (
			<>
				<Helmet noRobots />
				{complete_password_reset_request ? <Redirect to='/login' /> : null}

				{status?.error
					? (<></>)
					: status?.password_reset_request_authorized?.fetching
						? (<FullScreenLoader visible={true} />)
						: password_reset_request_authorized
							? (
								<div style={{ minHeight: 'calc(100vh - 55px)', marginTop: '55px' }} className='d-flex justify-content-center align-items-center'>
									<Form onFinish={onFinish}>
										<Form.Item noStyle>
											<Form.Item name="password" rules={[{ required: true, }]}>
												<Input.Password prefix={<LockOutlined className="site-form-item-icon" />} placeholder="New password" />
											</Form.Item>
										</Form.Item>
										<Form.Item name="password_confirmation" rules={[{ required: true, }]}>
											<Input.Password prefix={<LockOutlined className="site-form-item-icon" />} placeholder="Retype password" />
										</Form.Item>
										<Form.Item>
											<Button type="primary" htmlType="submit" className="login-form-button" block loading={status?.complete_password_reset_request?.posting}>
												Change password
											</Button>
										</Form.Item>
									</Form>
								</div>
							)
							: (
								<Result
									className='mt-55'
									status="warning"
									title="Invalid request url"
									subTitle='This password reset link is invalid. It is possible that it has expired or it never existed. If you are sure you requested it, try again or contact support'
									extra={
										<Button href='/login' type="primary" key="console">
											Request Another Reset Link
										</Button>
									}
								/>
							)}
			</>
		);
	},
	mapStateToProps = state => state,
	mapDispatchToProps = dispatch => bindActionCreators({
		authorizePasswordResetRequest, completeResetPassword
	}, dispatch),
	ResetPassword = connect(mapStateToProps, mapDispatchToProps)(ResetPasswordComponent);

export default ResetPassword;