import React from 'react';
import { Text, TouchableOpacity } from 'react-native';
import { compose, withHandlers } from 'recompose';
import { Icon } from 'react-native-material-ui';
import AuthManager from '../AuthManager';
import theme from '../ui-theme';

const ResetPasswordButton = ({ resetPassword }) => {
	return (
		<TouchableOpacity
			onPress={resetPassword}
			style={{
				flexDirection: 'row',
				marginTop: 0,
				padding: 16,
				alignItems: 'center',
				justifyContent: 'center',
			}}>
			<Text
				style={{
					textAlign: 'center',
					fontSize: 16,
					color: theme.palette.primaryColor,
					marginRight: 5,
				}}>
				Forgot your pasword?
			</Text>
			<Icon name="launch" color={theme.palette.primaryColor} size={16} />
		</TouchableOpacity>
	);
};

export default compose(
	withHandlers({
		resetPassword: ({ onSuccess, onError, onPress }) => async () => {
			try {
				onPress && onPress();
				await AuthManager.resetPassword();
				onSuccess && onSuccess();
			} catch (error) {
				onError && onError(error);
			}
		},
	})
)(ResetPasswordButton);