import React from 'react';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import { Modal, Button, Input, Form } from 'antd';
import { resetPassword } from '@lib/redux/actions/auth-actions';



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

		return (
			<>
				<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>

			</>
		);
	},
	mapStateToProps = state => state,
	mapDispatchToProps = dispatch => bindActionCreators({
		resetPassword
	}, dispatch),
	ForgotPassword = connect(mapStateToProps, mapDispatchToProps)(ForgotPasswordComponent);

export default ForgotPassword;