import React from 'react';
//@ts-ignore
import { connect } from 'react-redux';
import { AnyAction, bindActionCreators, Dispatch } from 'redux';
import { Modal, Button, Input, Form } from 'antd';
import { resetPassword } from 'lib/redux/actions/auth-actions';
import LayoutWithNav from './layout/LayoutWithNav';



const
	ForgotPasswordComponent = ({ forgot_password, status, resetPassword }: Record<string, any>) => {
		const
			[visible, setVisible] = React.useState(false),
			handleCancel = () => setVisible(false),
			submitHandler = (payload: any) => resetPassword(payload);

		return (
			<LayoutWithNav page_title='login'>
				<span onClick={e => setVisible(!visible)}>Forgot Password</span>
				<Modal title="Forgot Password" visible={visible} onCancel={handleCancel} footer={
					<Button onClick={handleCancel} danger type='primary'>Close</Button>
				}>

					<Form onFinish={submitHandler}>
						<Form.Item noStyle>
							<Form.Item label='Enter Your Email' name='email' rules={[{ required: true }]}>
								<Input type='email' />
							</Form.Item>
							<p className='text-danger'>{status?.forgot_password?.error?.email?.join('<br />')}</p>
						</Form.Item>
						<Form.Item>
							<Button htmlType='submit' type='primary' loading={status?.forgot_password?.posting}>Send Password Change Request</Button>
						</Form.Item>
					</Form>

				</Modal>

			</LayoutWithNav>
		);
	},
	mapStateToProps = (state: any) => state,
	mapDispatchToProps = (dispatch: Dispatch<AnyAction>) => bindActionCreators({
		resetPassword
	}, dispatch),
	ForgotPassword = connect(mapStateToProps, mapDispatchToProps)(ForgotPasswordComponent);

export default ForgotPassword;