import React from 'react';
import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';
import { Col, Row, Typography, Button, Modal, Form, InputNumber } from 'antd';
import sms from '@assets/images/rastas/sms.jpg';
import logo from '@assets/images/rastas/logo-small-darktext.png';
import { verifyPhone, resendPhoneVerificationCode, changePhoneForVerification } from '@lib/redux/actions/auth-actions';


interface CPI {
	verifyPhone?,
	userState?,
	status?,
	resendPhoneVerificationCode?,
	phone_verification?,
	changePhoneForVerification?
}

const
	ConfirmPhoneComponent = ({ verifyPhone, changePhoneForVerification, userState, status, resendPhoneVerificationCode }: CPI) => {

		const
			[count, setCount] = React.useState(0),
			[trials, setTrials] = React.useState(1),
			startCount = () => {
				setTrials(trials + 1);
				// setCount(trials * 10);
				setCount(200);
			},
			verifyHandler = e => {
				e.preventDefault();
				verifyPhone(new FormData(e.target));
			},
			resendHandler = () => {
				startCount();
				resendPhoneVerificationCode();
			},
			changePhoneHandler = p => {
				changePhoneForVerification(p);
			},
			[changeModalVisible, setChangeModalVisible] = React.useState(false);

		React.useEffect(() => {
			setTimeout(() => {
				if (count == 0) return;

				setCount(count - 1);
			}, 1e3);
		}, [count]);

		return (
			<Row style={{ minHeight: 'calc(100vh - 54px)', marginTop: '54px' }}>
				<Col xs={{ span: 24 }} sm={{ span: 24 }} className='d-none d-md-block' md={{ span: 12 }}>
					<div style={{ height: '100%', position: 'relative' }}>
						<img src={sms} alt="" style={{ width: '100%', height: '100%', position: 'absolute', top: 0, left: 0 }} />
					</div>
				</Col>
				<Col xs={{ span: 24 }} sm={{ span: 24 }} md={{ span: 12 }}>
					<div className='d-flex' style={{ padding: '20px 10%', height: '100%', flexDirection: 'column' }}>
						<div>
							<img src={logo} alt={process.env.APP_NAME} height='100px' />
						</div>
						<div className='d-flex justify-content-center align-items-center' style={{ flex: 1 }}>
							<div>
								<Typography.Title style={{ fontSize: '20px' }} level={2}>Confirm Phone</Typography.Title>
								<p className="font-3 text-dark">One more step remains.</p>
								{userState?.phone
									? (
										<p className='font-3 text-dark'>We have sent a verificaton code to <span>{userState?.phone}</span> Confirm your phone number to activate your account and become a part of this exciting community.</p>
									)
									: (
										<p className="font-3 text-dark">Click on change phone number to set your phone number</p>
									)}

								<form onSubmit={verifyHandler} className="input-group mb-20">
									<input type="text" name='code' className="form-control" placeholder="Enter verification code" aria-label="Recipient's username with two button addons"
										aria-describedby="button-addon4" />
									<div className="input-group-append" id="button-addon4">
										<button className="btn btn-md btn-success m-0 px-3 py-2" type="submit">
											Verify&nbsp;&nbsp;
											{status?.userState?.posting
												? (<i className='fas fa-spin fa-spinner'></i>)
												: null}
										</button>
									</div>
								</form>
								<p className='text-danger'>{status?.userState?.error?.code?.join('<br />')}</p>

								<p className="font-3 text-dark">
									Didn&apos;t receive anything?&nbsp;
									{count == 0
										? (
											<Button disabled={count !== 0} onClick={resendHandler} loading={status?.phone_verification?.posting} type='text'><strong className="text-dark">Resend code</strong></Button>
										)
										: (
											<span>Resend in {count} seconds</span>
										)}
								</p>
							</div>
						</div>
						<div className='mt-50'>
							<Modal
								title="Change Phone Number"
								visible={changeModalVisible}
								onCancel={() => { setChangeModalVisible(false); }}
								footer={<></>}
							>
								<Form onFinish={changePhoneHandler} layout='vertical'>
									<Form.Item>
										<p className='text-danger'>{status?.change_phone_verification?.error?.phone?.join('<br />')}</p>
										<Form.Item
											label="New phone number"
											name="phone"
											rules={[{ required: true, message: 'Please input phone number' }]}>
											<InputNumber formatter={value => `+${value}`} className='w-100' />
										</Form.Item>
										<p><small>Eg: +233271600543</small></p>
									</Form.Item>

									<Form.Item>
										<Button loading={status?.change_phone_verification?.posting} type="primary" htmlType="submit">
											Submit
										</Button>
									</Form.Item>
								</Form>

							</Modal>
							<Button onClick={() => setChangeModalVisible(true)} type='ghost'>Change phone number</Button>
						</div>
					</div>
				</Col>
			</Row>
		);
	},
	mapStateToProps = state => state,
	mapDispatchToProps = dispatch => bindActionCreators({
		verifyPhone, resendPhoneVerificationCode, changePhoneForVerification
	}, dispatch),
	ConfirmPhone = connect(mapStateToProps, mapDispatchToProps)(ConfirmPhoneComponent);

export default ConfirmPhone;