import React from 'react';
import { ActivityIndicator, StyleSheet, Text, View } from 'react-native';
import PropTypes from 'prop-types';
import { connect } from 'react-redux';

import I18n from '../i18n';
import StatusBar from '../containers/StatusBar';
import { withTheme } from '../theme';
import { themes } from '../constants/colors';
import sharedStyles from './Styles';

const styles = StyleSheet.create({
	container: {
		flex: 1,
		justifyContent: 'center',
		alignItems: 'center'
	},
	text: {
		fontSize: 16,
		paddingTop: 10,
		...sharedStyles.textRegular,
		...sharedStyles.textAlignCenter
	}
});

const AuthLoadingView = React.memo(({ theme, text }) => (
	<View style={[styles.container, { backgroundColor: themes[theme].backgroundColor }]}>
		<StatusBar />
		{text && (
			<>
				<ActivityIndicator color={themes[theme].auxiliaryText} size='large' />
				<Text style={[styles.text, { color: themes[theme].bodyText }]}>{`${text}\n${I18n.t('Please_wait')}`}</Text>
			</>
		)}
	</View>
));

const mapStateToProps = state => ({
	text: state.app.text
});

AuthLoadingView.propTypes = {
	theme: PropTypes.string,
	text: PropTypes.string
};

export default connect(mapStateToProps)(withTheme(AuthLoadingView));