import _ from 'lodash';
import React, { Component } from 'react';
import {
	SafeAreaView,
	View,
	Keyboard,
	ScrollView,
	TouchableOpacity,
	Image,
	PixelRatio,
	Platform,
} from 'react-native';
import ImageResizer from 'react-native-image-resizer';
import DefaultPreference from 'react-native-default-preference';
import PropTypes from 'prop-types';
import { reduxForm } from 'redux-form';
import Mixpanel from 'react-native-mixpanel';
import i18n from '~/locale/i18n';
import { connect } from 'react-redux';
import { Text, Avatar, NixplayIcon as Icon } from 'nixplay-ui-kit';

import { PickerOptions } from '~/components/Photos/pickerOptions';
import { TextInput } from '~comp/reduxForm';
import { Button } from '~comp';
import { FIRST_TIME_INSTALL } from '~/lib/appConstants';
// import { PickerOptions } from '~/components/Photos/pickerOptions';


import { color as basicColor } from '~/styles/variables';
import { CustomPicker } from '~comp/AccountSettings/customPicker';
import { SHOW_TOAST, EDIT_BENE_MEMBER_RECORD, GET_ASSETS } from '~/store/actionTypes';
import { styles } from './styles';

const isAndroid = Platform.OS !== 'ios';
let currentState = {};

export class EditFamilyMember extends Component {
	static navigationOptions = () => {
		const leftButtons = [];
		const rightButtons = [];
		return {
			headerTransparent: false,
			title: 'Edit Household Member',
			subtitle: '',
			hideBackButton: false,
			leftButtons,
			rightButtons,
		};
	}

	static propTypes = {
		navigation: PropTypes.object.isRequired,
		isLoggedIn: PropTypes.bool.isRequired,
		handleSubmit: PropTypes.func.isRequired,
		valid: PropTypes.bool.isRequired,
		submitting: PropTypes.bool.isRequired,
		launchImagePicker: PropTypes.func.isRequired,
	}

	constructor(props) {
		super(props);
		currentState = {};
		const memberId = this.props.navigation.getParam('selected', {});
		console.log('EDIT: ', memberId);
		const selected = this.props.navigation.getParam(memberId, {});
		console.log('EDIT>DATA: ', selected);
		const dateCreated = _.get(selected, 'dateCreated', null);
		currentState = {
			...currentState,
			memberRefId: _.get(selected, 'memberRefId', ''),
			memberId: _.get(selected, 'memberId', ''),
			dateCreated,
			sex: _.get(selected, 'sex', ''),
			dob: _.get(selected, 'dob', ''),
			occupation: _.get(selected, 'occupation', ''),
			sector: _.get(selected, 'sector', ''),
			monthlyIncome: _.get(selected, 'monthlyIncome', ''),
			education: _.get(selected, 'education', ''),
			familyPosition: _.get(selected, 'familyPosition', ''),
			healthCondition: _.get(selected, 'healthCondition', ''),
			lastName: _.get(selected, 'lastName', ''),
			firstName: _.get(selected, 'firstName', ''),
			middleName: _.get(selected, 'middleName', ''),
			suffix: _.get(selected, 'suffix', ''),
			mobileNumber: _.get(selected, 'mobileNumber', ''),
			emailAddress: _.get(selected, 'emailAddress', ''),
			remarks: _.get(selected, 'remarks', ''),
			avatarPhoto: _.get(selected, 'avatarPhoto', null),
		};
		// console.log('current: ', currentState);
		this.state = {
			// index: 0,
			bottomOpacity: 1,
			sex: _.get(selected, 'sex', ''),
			dob: _.get(selected, 'dob', ''),
			occupation: _.get(selected, 'occupation', ''),
			sector: _.get(selected, 'sector', ''),
			monthlyIncome: _.get(selected, 'monthlyIncome', ''),
			education: _.get(selected, 'education', ''),
			familyPosition: _.get(selected, 'familyPosition', ''),
			healthCondition: _.get(selected, 'healthCondition', ''),
			lastName: _.get(selected, 'lastName', ''),
			firstName: _.get(selected, 'firstName', ''),
			middleName: _.get(selected, 'middleName', ''),
			suffix: _.get(selected, 'suffix', ''),
			mobileNumber: _.get(selected, 'mobileNumber', ''),
			emailAddress: _.get(selected, 'emailAddress', ''),
			remarks: _.get(selected, 'remarks', ''),
			avatarPhoto: _.get(selected, 'avatarPhoto', null),
		};

		DefaultPreference.set(FIRST_TIME_INSTALL, '')
		this.goToWebView = this.goToWebView.bind(this);
		this.debouncerHandleSubmit = _.debounce(this.props.handleSubmit, 3000, {
			leading: true,
			trailing: false,
		});
	}

	async componentDidMount() {
		if (Platform.OS === 'ios') {
			this.keyboardWillShowSub = Keyboard.addListener('keyboardWillShow', this.keyboardWillShow);
			this.keyboardWillHideSub = Keyboard.addListener('keyboardWillHide', this.keyboardWillHide);
		} else {
			this.keyboardWillShowSub = Keyboard.addListener('keyboardDidShow', this.keyboardDidShow);
			this.keyboardWillHideSub = Keyboard.addListener('keyboardDidHide', this.keyboardDidHide);
		}
	}

	componentWillUnmount() {
		currentState = {};
		this.props.navigation.setParams('selected', {});
		this.keyboardWillShowSub.remove();
		this.keyboardWillHideSub.remove();
	}

	keyboardWillShow = () => {
		this.setState({ bottomOpacity: 0 });
	};

	keyboardWillHide = () => {
		this.setState({ bottomOpacity: 1 });
	};

	keyboardDidShow = () => {
		this.setState({ bottomOpacity: 0 });
	};

	keyboardDidHide = () => {
		this.setState({ bottomOpacity: 1 });
	};

	goToWebView(url) {
		this.props.navigation.push('WebView', { webViewUrl: url });
	}

	setPreference = () => (
		DefaultPreference.set(FIRST_TIME_INSTALL, `${(new Date()).getMilliseconds()}`)
	)

	goToNext = () => {
		this.props.navigation.push('SetLifeStatus');
	}

	goToSignUp = () => {
		this.setPreference()
			.then(() => {
				this.props.navigation.push('SignUpUserInfo');
			});
	}

	onUpdateEthnic = (ethnicity) => {
		this.setState({ ethnicity });
		currentState = {...currentState, ethnicity };
	}
	ethnicSelect = () => {
		this.props.navigation.push(
			'EthnicSelection',
			{
				selected: this.state.ethnicity,
				onUpdate: this.onUpdateEthnic,
				origin: 1,
			},
		);
	}
	onUpdateOccupation = (occupation) => {
		this.setState({ occupation });
		currentState = { ...currentState, occupation };
	}
	occupationSelect = () => {
		this.props.navigation.push(
			'OccupationSelection',
			{
				selected: this.state.occupation,
				onUpdate: this.onUpdateOccupation,
				origin: 1,
			},
		);
	}
	onUpdateEducation = (education) => {
		this.setState({ education });
		currentState = { ...currentState, education };
	}
	educationSelect = () => {
		this.props.navigation.push(
			'EducationSelection',
			{
				selected: this.state.education,
				onUpdate: this.onUpdateEducation,
				origin: 1,
			},
		);
	}
	onUpdateSector = (sector) => {
		this.setState({ sector });
		currentState = { ...currentState, sector };
	}
	sectorSelect = () => {
		this.props.navigation.push(
			'SectorSelection',
			{
				selected: this.state.sector,
				onUpdate: this.onUpdateSector,
				origin: 1,
			},
		);
	}
	onUpdateMonthIncome = (monthlyIncome) => {
		this.setState({ monthlyIncome });
		currentState = {...currentState, monthlyIncome };
	}
	monthIncomeSelect = () => {
		this.props.navigation.push(
			'MonthIncomeSelection',
			{
				selected: this.state.monthlyIncome,
				onUpdate: this.onUpdateMonthIncome,
				origin: 1,
			},
		);
	}
	onUpdateHouseOwnership = (houseOwnership) => {
		this.setState({ houseOwnership });
		currentState = { ...currentState, houseOwnership };
	}
	houseOwnershipSelect = () => {
		this.props.navigation.push(
			'HouseholdSelection',
			{
				selected: this.state.houseOwnership,
				onUpdateHousehold: this.onUpdateHouseOwnership,
				origin: 1,
			},
		);
	}
	onUpdateHealth = (healthCondition) => {
		this.setState({ healthCondition });
		currentState = {...currentState, healthCondition };
	}
	healthSelect = () => {
		this.props.navigation.push(
			'HealthSelection',
			{
				selected: this.state.healthCondition,
				onUpdate: this.onUpdateHealth,
				origin: 1,
			},
		);
	}

	onUpdateReliefAssitance = (reliefAssistance) => {
		this.setState({ reliefAssistance });
		currentState = {...currentState, reliefAssistance };
	}
	reliefSelect = () => {
		this.props.navigation.push(
			'ReliefSelection',
			{
				selected: this.state.reliefAssistance,
				onUpdate: this.onUpdateReliefAssitance,
				origin: 1,
			},
		);
	}

	onUpdateSuffix = (suffix) => {
		this.setState({ suffix });
		currentState = {...currentState, suffix };
	}
	suffixSelect = () => {
		this.props.navigation.push(
			'SuffixSelection',
			{
				selected: this.state.suffix,
				onUpdate: this.onUpdateSuffix,
				origin: 1,
			},
		);
	}

	onUpdateGender = (sex) => {
		this.setState({ sex });
		currentState = { ...currentState, sex };
	}
	genderSelect = () => {
		this.props.navigation.push(
			'GenderSelection',
			{
				selected: this.state.sex,
				onUpdate: this.onUpdateGender,
				origin: 1,
			},
		);
	}
	onUpdateFamilyPosition = (familyPosition) => {
		this.setState({ familyPosition });
		currentState = { ...currentState, familyPosition };
	}
	familyPositionSelect = () => {
		this.props.navigation.push(
			'FamilyPositionSelection',
			{
				selected: this.state.familyPosition,
				onUpdate: this.onUpdateFamilyPosition,
				origin: 1,
			},
		);
	}

	processSourceImage = (rawImage) => {
		this.setState({ }, async () => {
			try {
				let sourceUri = rawImage;
				Image.getSize(sourceUri, async (w, h) => {
					const safeSize = PixelRatio.roundToNearestPixel(1000); // approximate preferred max dimension size
					let width = w;
					let height = h;

					if (width > safeSize && width > height) {
						const percentageDiff = (safeSize / width);
						width = safeSize;
						height = PixelRatio.roundToNearestPixel(height * percentageDiff);
					} else if (height > safeSize && height > width) {
						const percentageDiff = (safeSize / height);
						height = safeSize;
						width = PixelRatio.roundToNearestPixel(width * percentageDiff);
					}
					const resizedImage = await ImageResizer.createResizedImage(sourceUri, width, height, 'JPEG', 100, 0, null);
					sourceUri = resizedImage.uri;
					this.setState({ avatarPhoto: sourceUri });
					currentState = { ...currentState, avatarPhoto: sourceUri };
				}, (e) => {
					console.log('error2: ', e);
				});
			} catch (e) {
				console.log('error1: ', e);
			}
		});
	};

	launchImagePicker = () => {
		this.props.launchImagePicker({
			options: {
				...PickerOptions([]),
				maximumImageCount: 1,
				imageSelectionLimit: i18n.t('contents.imageSelectionLimit', { count: 1 }),
				mediaType: 'image',
				allowsMultipleSelection: '0',
			},
			resolve: (imagesPicked) => {
				if (imagesPicked && imagesPicked[0] && imagesPicked[0].uri) {
					console.log('IMAGE: ', imagesPicked[0].uri);
					this.processSourceImage(imagesPicked[0].uri);
				}
			},
		});
	}

	render() {
		const {
			sex, dob,
			occupation, sector, monthlyIncome,
			education, familyPosition, healthCondition,
			lastName, firstName, middleName, suffix,
			mobileNumber, emailAddress, remarks,
		} = this.state;
		return (
			<View style={styles.container}>
				<ScrollView
					style={{
						flex: 1,
					}}
					contentContainerStyle={styles.contentContainer}
					showsVerticalScrollIndicator={false}
					showsHorizontalScrollIndicator={false}
				>
					<View style={styles.inputContainer}>
						<Text textStyle="subhead1" style={{ textAlign: 'left', marginBottom: 10, paddingLeft: 0 }}>Basic Information</Text>
						<View style={{ backgroundColor: basicColor.wrikeGreen2, height: 0.5, marginHorizontal: 0, opacity: 0.8 }} />
						<Text
							style={[styles.inputElement, { marginTop: 15 }]}
							textStyle="subhead"
						>
							Last Name
						</Text>
						<TextInput
							name="lastName"
							testID="tiLastName"
							placeholder="Last name"
							autoCapitalize="none"
							autoCorrect={false}
							returnKeyType="next"
							keyboardType={(isAndroid) ? 'default' : 'ascii-capable'}
							blurOnSubmit
							onSubmitEditing={this.debouncerHandleSubmit}
							style={{ color: basicColor.wrikeBg }}
							selectionColor={basicColor.wrikeGreen2}
							defaultText={lastName}
							onChange={text => this.setState({ lastName: text })}
						/>
						<Text
							style={styles.inputElement}
							textStyle="subhead"
						>
							First Name
						</Text>
						<TextInput
							name="firstName"
							testID="tiFirstName"
							placeholder="First name"
							autoCapitalize="none"
							autoCorrect={false}
							returnKeyType="next"
							keyboardType={(isAndroid) ? 'default' : 'ascii-capable'}
							blurOnSubmit
							onSubmitEditing={this.debouncerHandleSubmit}
							style={{ color: basicColor.wrikeBg }}
							selectionColor={basicColor.wrikeGreen2}
							defaultText={firstName}
							onChange={text => this.setState({ firstName: text })}
						/>
						<Text
							style={styles.inputElement}
							textStyle="subhead"
						>
							Middle Name
						</Text>
						<TextInput
							name="middleName"
							testID="tiMiddleName"
							placeholder="Middle name"
							autoCapitalize="none"
							autoCorrect={false}
							returnKeyType="next"
							keyboardType={(isAndroid) ? 'default' : 'ascii-capable'}
							blurOnSubmit
							onSubmitEditing={this.debouncerHandleSubmit}
							style={{ color: basicColor.wrikeBg }}
							selectionColor={basicColor.wrikeGreen2}
							defaultText={middleName}
							onChange={text => this.setState({ middleName: text })}
						/>
						<Text style={styles.inputElement} textStyle="subhead">Suffix</Text>
						<CustomPicker
							action={this.suffixSelect}
							itemSelected={(!_.isEmpty(suffix) ? suffix : '')}
							name="suffix"
							placeholder="Select Suffix"
						/>
						<Text style={[styles.inputElement, { marginTop: 10 }]} textStyle="subhead">Sex</Text>
						<CustomPicker
							action={this.genderSelect}
							itemSelected={(!_.isEmpty(sex) ? sex : '')}
							name="gender"
							placeholder="Select Sex"
						/>
						<Text
							style={[styles.inputElement, { marginTop: 5 }]}
							textStyle="subhead"
						>
							Date of Birth
						</Text>
						<TextInput
							name="dob"
							testID="tiDob"
							placeholder="MM-DD-YYYY"
							autoCapitalize="none"
							autoCorrect={false}
							maxLength={10}
							returnKeyType="next"
							keyboardType={(isAndroid) ? 'default' : 'ascii-capable'}
							blurOnSubmit
							onSubmitEditing={this.debouncerHandleSubmit}
							style={{ color: basicColor.wrikeBg }}
							selectionColor={basicColor.wrikeGreen2}
							defaultText={dob}
							onChange={text => this.setState({ dob: text })}
						/>
						<Text
							style={[styles.inputElement, { marginTop: 5 }]}
							textStyle="subhead"
						>
							Mobile Number
						</Text>
						<TextInput
							name="mobileNumber"
							testID="tiMobileNumber"
							placeholder="+63"
							autoCapitalize="none"
							autoCorrect={false}
							returnKeyType="next"
							keyboardType={(isAndroid) ? 'default' : 'ascii-capable'}
							blurOnSubmit
							onSubmitEditing={this.debouncerHandleSubmit}
							style={{ color: basicColor.wrikeBg }}
							selectionColor={basicColor.wrikeGreen2}
							defaultText={mobileNumber}
							onChange={text => this.setState({ mobileNumber: text })}
						/>
						<Text
							style={[styles.inputElement, { marginTop: 5 }]}
							textStyle="subhead"
						>
							Email Address
						</Text>
						<TextInput
							name="emailAddress"
							testID="tiEmailAddress"
							placeholder="ex. abc@gmail.com"
							autoCapitalize="none"
							autoCorrect={false}
							returnKeyType="next"
							keyboardType={(isAndroid) ? 'default' : 'ascii-capable'}
							blurOnSubmit
							onSubmitEditing={this.debouncerHandleSubmit}
							style={{ color: basicColor.wrikeBg }}
							selectionColor={basicColor.wrikeGreen2}
							defaultText={emailAddress}
							onChange={text => this.setState({ emailAddress: text })}
						/>
						<Text
							style={[styles.inputElement, { marginTop: 5 }]}
							textStyle="subhead"
						>
							Educational Attainment
						</Text>
						<CustomPicker
							action={this.educationSelect}
							itemSelected={(!_.isEmpty(education) ? education : '')}
							name="Education"
							placeholder="Select Educational Attainment"
						/>
					</View>
					{/* <View> Educational Background </View> */}
					<Text textStyle="subhead1" style={{ textAlign: 'left', marginVertical: 10, paddingLeft: 20 }}>Other details</Text>
					<View style={{ backgroundColor: basicColor.wrikeGreen2, height: 0.5, marginHorizontal: 20, opacity: 0.8 }} />
					<View style={[styles.inputContainer, { marginTop: 10 }]}>
						<Text style={styles.inputElement} textStyle="subhead">Occupation</Text>
						{/* <CustomPicker
							action={this.occupationSelect}
							itemSelected={(!_.isEmpty(occupation) ? occupation : '')}
							name="Occupation"
							placeholder="Select Occupation"
						/> */}
						<TextInput
							name="occupation"
							testID="tiOccupation"
							placeholder="Set Occupation"
							autoCapitalize="none"
							autoCorrect={false}
							returnKeyType="next"
							keyboardType={(isAndroid) ? 'default' : 'ascii-capable'}
							blurOnSubmit
							onSubmitEditing={this.debouncerHandleSubmit}
							style={{ color: basicColor.wrikeBg }}
							selectionColor={basicColor.wrikeGreen2}
							defaultText={occupation}
							onChange={text => this.setState({ occupation: text })}
						/>
					</View>
					<View style={[styles.inputContainer, { marginTop: -10 }]}>
						<Text style={styles.inputElement} textStyle="subhead">Sector</Text>
						<CustomPicker
							action={this.sectorSelect}
							itemSelected={(!_.isEmpty(sector) ? sector : '')}
							name="Sector"
							placeholder="Select Sector"
						/>
					</View>
					<View style={[styles.inputContainer, { marginTop: -10 }]}>
						<Text style={styles.inputElement} textStyle="subhead">Monthly Income</Text>
						<CustomPicker
							action={this.monthIncomeSelect}
							itemSelected={(!_.isEmpty(monthlyIncome) ? monthlyIncome : '')}
							name="MonthlyIncome"
							placeholder="Select Monthly Income"
						/>
					</View>
					<View style={[styles.inputContainer, { marginTop: -10 }]}>
						<Text style={styles.inputElement} textStyle="subhead">Relation to the Head</Text>
						<CustomPicker
							action={this.familyPositionSelect}
							itemSelected={(!_.isEmpty(familyPosition) ? familyPosition : '')}
							name="familyPosition"
							placeholder="Relationship"
						/>
					</View>
					<View style={[styles.inputContainer, { marginTop: -10 }]}>
						<Text style={styles.inputElement} textStyle="subhead">Health Condition/PWD</Text>
						<CustomPicker
							action={this.healthSelect}
							itemSelected={(!_.isEmpty(healthCondition) ? healthCondition : '')}
							name="healthCondition"
							placeholder="Select Health Condition"
						/>
					</View>
					<View style={[styles.inputContainer, { marginTop: -10, marginBottom: 0 }]}>
						<Text
							style={[styles.inputElement]}
							textStyle="subhead"
						>
							Remarks
						</Text>
						<TextInput
							name="remarks"
							testID="tiRemarks"
							placeholder=""
							autoCapitalize="none"
							autoCorrect={false}
							returnKeyType="next"
							keyboardType={(isAndroid) ? 'default' : 'ascii-capable'}
							blurOnSubmit
							onSubmitEditing={this.debouncerHandleSubmit}
							style={{ color: basicColor.wrikeBg }}
							selectionColor={basicColor.wrikeGreen2}
							defaultText={remarks}
							onChange={text => this.setState({ remarks: text })}
						/>
					</View>
					<View style={[styles.inputContainer, { marginTop: -10 }]}>
						<Text
							style={[styles.inputElement]}
							textStyle="subhead"
						>
							Add Profile Photo
						</Text>
					</View>
					<View style={styles.profileContent}>
						<Avatar
							firstName={(!_.isEmpty(this.state.firstName) ? this.state.firstName : 'M')}
							lastName={(!_.isEmpty(this.state.lastName) ? this.state.lastName : 'E')}
							size="large"
							source={(!_.isEmpty(this.state.avatarPhoto) ? { uri: this.state.avatarPhoto } : null)}
						/>
						<TouchableOpacity
							style={styles.avatarEditContainer}
							onPress={this.launchImagePicker}
						>
							<Icon
								name="camera"
								color="blue"
								size={16}
							/>
						</TouchableOpacity>
					</View>
					<View style={styles.checkboxContainer}>
						<View style={styles.checkboxLabel}>
							<Text style={{ color: basicColor.gitlabGray4, paddingHorizontal: 18 }} textStyle="subhead" />
						</View>
					</View>
				</ScrollView>
				<SafeAreaView style={[styles.safeArea, { opacity: this.state.bottomOpacity }]}>
					<View style={styles.buttonContainer}>
						<Button
							testID="Saved"
							style={[styles.button, styles.loginButton]}
							onPress={this.debouncerHandleSubmit}
							text="Save Member Record"
						/>
					</View>
				</SafeAreaView>
			</View>
		);
	}
}

const validate = () => {};

const onSubmit = (values, dispatch, props) => (
	new Promise((resolve, reject) => {
		const firstName = _.get(values, 'firstName', currentState.firstName);
		const lastName = _.get(values, 'lastName', currentState.lastName);
		const middleName = _.get(values, 'middleName', currentState.middleName);
		const dob = _.get(values, 'dob', currentState.dob);
		const remarks = _.get(values, 'remarks', currentState.remarks);
		const emailAddress = _.get(values, 'emailAddress', currentState.emailAddress);
		const occupation = _.get(values, 'occupation', currentState.occupation);
		const mobileNumber = _.get(values, 'mobileNumber', currentState.mobileNumber);
		// console.log('onSubmit: ', firstName, middleName, lastName, dob, remarks, emailAddress, occupation, mobileNumber);
		const age = (!_.isEmpty(dob) && dob.length >= 10) ? (new Date()).getFullYear() - (dob.substr(6, 10)) : '0';
		const {
			sex, sector, monthlyIncome, dateCreated,
			education, familyPosition, healthCondition, suffix, memberRefId, avatarPhoto, memberId,
		} = currentState;
		// console.log('onSubmit>VALUES: ', values);
		// console.log('onSubmit>STATE: ', currentState);
		if (!_.isEmpty(lastName) && !_.isEmpty(firstName) && !_.isEmpty(middleName) && !_.isEmpty(dob)
		&& !_.isEmpty(sex) && !_.isEmpty(monthlyIncome) && !_.isEmpty(education)
		&& !_.isEmpty(familyPosition) && !_.isEmpty(healthCondition)) {
			console.log('VALIDATED');
			// mixpanel entry
			// try {
			// 	Mixpanel.trackWithProperties('household_member', {
			// 		firstName,
			// 		lastName,
			// 		middleName,
			// 		remarks,
			// 		mobileNumber,
			// 		emailAddress,
			// 		sex,
			// 		age,
			// 		dob,
			// 		occupation,
			// 		sector,
			// 		monthlyIncome,
			// 		education,
			// 		familyPosition,
			// 		healthCondition,
			// 		suffix,
			// 		dateCreated: epochtime,
			// 	});
			// } catch (e) {
			// 	console.log('Mixpanel: ', e);
			// }
			dispatch({
				type: EDIT_BENE_MEMBER_RECORD,
				payload: {
					firstName,
					lastName,
					middleName,
					remarks,
					mobileNumber,
					emailAddress,
					sex,
					age,
					dob,
					occupation,
					sector,
					monthlyIncome,
					education,
					familyPosition,
					healthCondition,
					suffix,
					dateCreated,
					memberRefId,
					avatarPhoto,
					memberId,
				},
			});
			resolve('Validated');
		} else {
			dispatch({ type: SHOW_TOAST, payload: { text: 'Some fields are required' } });
			reject();
		}
	})
);

const onSubmitSuccess = (result, dispatch, props) => {
	// console.log('onSubmitSuccess: ', props);
	currentState = {};
	dispatch({ type: SHOW_TOAST, payload: { text: 'Edited Member Record' } });
	props.navigation.goBack();
};

const mapStateToProps = (state) => ({
	isLoggedIn: !_.isEmpty(state.user.token),
	languageCode: _.get(state, 'settings.languageCode'),
});

export const mapActionsToProps = (dispatch) => ({
	launchImagePicker(payload) {
		dispatch({ type: GET_ASSETS, payload });
	},
});


const FormContainer = reduxForm({
	form: 'EditFamilyMember',
	validate,
	onSubmit,
	onSubmitSuccess,
	destroyOnUnmount: true,
})(EditFamilyMember);

export default connect(mapStateToProps, mapActionsToProps)(FormContainer);
