import React, {PureComponent} from 'react';
import {View, Text, TouchableOpacity, TextInput, StatusBar, ImageBackground, AsyncStorage, Image, Keyboard} from 'react-native';
import styles from './styles';
import ProgressBar from '../../components/common/ProgressBar';
import * as userActions from '../../actions/userActions';
import { bindActionCreators } from 'redux';
import {connect} from 'react-redux';
import {isEmpty} from '../../utils/helper';
import {loginBackground, icLogoVegaWhite, phone, icClearButton, nextPage} from '../../utils/icons'
import SuccessNormal from './components/SuccessNormal';
import Header from '../../components/Header';
import ConfirmCode from '../../components/input/ConfirmCode';
import CountDown from '../../components/buttons/CountDown';
import Toast from '../../components/messages/Toast';
import {DEFAULT_ERROR} from '../../constants/language'
import ModalWrapper from 'react-native-modal-wrapper';
import Success from './components/Success';
import {converPhone} from '../../utils/helper';
import Button from '../../components/buttons/Button';
// import ModalScreen from '../ModalScreen';
import ScreenParent from '../ScreenParent'

class OtpEmail extends ScreenParent {
	constructor(props) {
		super(props);
		this.state =  {
			...this.state,
			time: props.expiredIn,
			isLoading: true,
			username: '',
			password: '',
			repeatPassword: '',
			showModal: false,
			otp: 0,
			isError: false,
			resMessage: '',
			isWaiting: false,
			forgot: false,
			verifyPhone: false,
			btnText: 'HOÀN THÀNH'
		}
	}

	componentWillMount() {
		super.componentWillMount();
		if(this.state.notConnected) {
			this.setState({
				isLoading: false
			})
			return;
		}

	}

	getFacebookOtp = async(phone) => {
		const data = await this.props.actions.getAccountKitUrl(phone);
		console.log("get top", data);
		if(data.status === 200) {

			const form = data.data;
			this.setState({
				isLoading: false,
				isError: false,
				isWaiting: false,
				urlAccount: form.url,
				request_code: form.formData.request_code,
				phoneNumber: form.formData.phone_number
			})
			if(this._countDown) this._countDown._setTime(60);
		}else {
			this.setState({
				isLoading: false,
				isError: true,
				message: data.errors['phone'] ? data.errors['phone'] : data.message
			})
		}
	}

	login() {

	}

	_next = () => {
		this._onFinishCheckingCode2(this.state.otp);
	}

	_close() {
		this.props.navigator.dismissModal();
	}

	_onFinishCheckingCode2 = (isValid, code) => {
		if(this.state.notConnected) {
			this.showNetWordError();
			return;
		}
		const {type, password} = this.props;
		Keyboard.dismiss();
		this.setState({
			isWaiting: true,
			otp: isValid
		}, async() => {
			var phone = this.props.phone || this.props.phoneNumber;
			const {urlAccount, request_code, phoneNumber} = this.state;
			const {fullname, phone, email, birthday, address, province, district, formData} = this.props;
			console.log("formData", formData);
			const res = await this.props.actions.updateUserInfo(fullname, phone, email, birthday, address, province, district, isValid, formData.url, formData.formData.phone_number, formData.formData.request_code );
			console.log("updateUserInfo otp", res);
			if(res.status === 200) {
				this.setState({
					isWaiting: false
				}, () => {
					this.setState({
						showModal: true
					})
				})
			}else {
				this.setState({
					isWaiting: false
				}, () => {
					if(res.errors) {
						const errors = res.errors;
						console.log(errors);
						Object.keys(errors).map((key) => {
							console.log(errors[key])
							this.toast.show(errors[key]);
						})
						// res.errors.forEach
					}else {
						this.toast.show(DEFAULT_ERROR)
					}
				});
			}
			// .then(res => {
			// 	console.log("updateUserInfo", res);
			// 	this.setState({
			// 		isLoading: false,
			// 	}, () => {
			// 		if(res.status === 200) {

			// 		}
			//
			// 	})
			// }).catch(err => {
			// 	this.toast.show(DEFAULT_ERROR)
			// })

			// const data = await this.props.actions.verifyAccountKitOtp(urlAccount, phoneNumber, request_code, isValid);

			// if(data.status === 200) {
			// 	this._navigate(phone, data.data);
			// }else {
			// 	this.setState({
			// 		isLoading: false,
			// 		isWaiting: false,
			// 	}, () => {
			// 		this.toast.show(data.message)
			// 	})
			// }
		})
	}

	_countDownCallBack = () => {
		this.setState({
			isWaiting: true
		}, () => {
			const phone = this.props.phone || this.props.phoneNumber;
			this.getFacebookOtp(phone);
		})
	}

	_goHome = (data) => {
		this.props.actions.login(this.props.phone, data)
		.then(() => {
			//
			if(!isEmpty(this.props.user)) {
				this.setState({showModal: false}, () => {
					this.props.navigator.resetTo({
						screen: 'app.Home',
						navigatorStyle: {
							navBarTextColor: "#ffffff",
							navBarComponentAlignment: 'center', // center/fill
							navBarButtonColor: '#ffffff',
							navBarBackgroundColor: '#007ed2',
							statusBarHidden: false,
							navBarHidden: true,
							drawUnderNavBar: false,
							statusBarTextColorSchemeSingleScreen: 'light',
				        },
					});
				})
			}
		}).catch(err => {
			// console.log("loginErr", err);
			if(err.data) {
				this.setState({
					isLoading: false
				}, () => {
					this.toast.show(err.data.message);
				})
			}else {
				this.setState({
					isLoading: false
				}, () => {
					this.toast.show(DEFAULT_ERROR);
				})
			}
		})
	}

	_modalCallback = () => {
		this.setState({showModal: false}, () => {;
			this.props.navigator.resetTo({
				screen: 'app.Home',
				navigatorStyle: {
					navBarTextColor: "#ffffff",
					navBarComponentAlignment: 'center', // center/fill
					navBarButtonColor: '#ffffff',
					navBarBackgroundColor: '#007ed2',
					statusBarHidden: false,
					navBarHidden: true,
					drawUnderNavBar: false,
					statusBarTextColorSchemeSingleScreen: 'light',
		        },
			});
		})
	}

	renderModal(message, changePass, password) {
		return (
			<ModalWrapper
			    	style={{flex: 1, backgroundColor: 'transparent'}}
			    	visible={this.state.showModal}
			    >
				<SuccessNormal callBack={this._modalCallback} message={'Cập nhật thông tin thành công!'} btnText={'VỀ TRANG CHỦ'}/>
			</ModalWrapper>
		)
	}

	renderMessage(isError, message, phone, phoneNumber, time) {
		if(isError) {
			return (
				<View style={styles.errors}>
					<Text style={styles.error_message}>{message}</Text>
				</View>
			)
		}else {
			return (
				<View style={{flex: 1}}>
					<View style={styles.wrapTextOtp}>
						<Text style={styles.textOtp} numberOfLines={2}>Nhập mã OTP vừa được gửi về số điện thoại <Text style={{fontWeight: 'bold'}}>{phone ? converPhone(phone) : converPhone(phoneNumber)}</Text></Text>
					</View>
					<View style={[styles.block, {height: 132}]}>
						<View style={styles.blockItem}>
							<View style={{width: '100%', height: 60}}>
								<ConfirmCode
									ref="codeInputRef2"
									keyboardType="numeric"
									size={40}
									codeInputStyle={styles.confirmCode}
									initialCodeInputStyle={styles.confirmCode}
									codeLength={6}
									activeColor={'#ffffff'}
									inactiveColor={'#a3aeb8'}
									className={'border-circle'}
									autoFocus={true}
									codeInputStyle={{ fontWeight: '800' }}
									onFulfill={(isValid, code) => this._onFinishCheckingCode2(isValid, code)}
								/>
								<View style={[styles.lineStyle]}></View>
							</View>
							<View style={styles.wrapResend}>
								<CountDown ref={c => this._countDown = c} time={time} callBack={() =>this._countDownCallBack()} title={'Không nhận được mã? Gửi lại sau'}/>
							</View>
						</View>

					</View>
					<Toast
	                    ref={c => this.toast = c}
	                    style={{backgroundColor:'red'}}
	                    position='top'
	                    positionValue={200}
	                    fadeInDuration={100}
	                    fadeOutDuration={3000}
	                    opacity={0.8}
	                    textStyle={{color:'white'}}
	                />
					<View style={{backgroundColor: '#ffffff', position: 'absolute', bottom: 0, width: '100%'}}>
						<Button style={{justifyContent: 'center', width: '100%', marginTop: 10, marginBottom: 10}} title={this.state.btnText} callBack={this._next} />
					</View>
			    </View>
			)
		}
	}

	render() {
		const {title, phone, phoneNumber, message, changePass, password} = this.props;
		const {isError, isLoading, resMessage, time} = this.state;
		return (
			<View style={[styles.container, {paddingTop: 0, backgroundColor: "#f0eff5"}]}>
				<Header title={'Xác nhận số điện thoại'} navigator={this.props.navigator} />
				<View style={{flex: 1}}>
					{this.renderMessage(isError, resMessage, phone, phoneNumber, time)}
			     	<ProgressBar isShow={this.state.isWaiting} />
			     </View>
			    {this.renderModal(message, changePass, password)}
			</View>
		)
	}
}

function mapStateToProps(state, ownProps) {
	return {
		user: state.userReducers.user,
	}
}

function mapDispatchToProps(dispatch) {
	return {
		actions: bindActionCreators(userActions, dispatch),
	};
}

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