import React from 'react';
import {
	StyleSheet,
	View,
} from 'react-native';
import {
	Button,
	Text,
	NixplayIcon as Icon,
} from 'nixplay-ui-kit';

import i18n from '~/locale/i18n';
import PropTypes from 'prop-types';
import OfflineEmpty from '~comp/offlineEmpty';

const styles = StyleSheet.create({
	container: {
		height: '100%',
		alignItems: 'center',
		justifyContent: 'space-between',
	},
	loadingContainer: {
		height: '100%',
		alignItems: 'center',
		justifyContent: 'center',
	},
	buttonContainer: {
		height: 144,
	},
	textContainer: {
		justifyContent: 'center',
		alignItems: 'center',
		margin: 40,
	},
	centerIcon: {
		margin: 16,
	},
	centerText: {
		textAlign: 'center',
	},
	inviteButton: {
		minWidth: 184,
	},
});

export const FriendsEmptyComponent = (props) => (props.loading ? (
	<View style={styles.loadingContainer} />
) : (
	<View style={styles.container}>
		<View style={styles.textContainer}>
			<Icon
				style={styles.centerIcon}
				size={80}
				color="mistBlue03"
				name="friends"
			/>
			<Text
				textStyle="title2"
			>
				{i18n.t('friends.startInviteFriends')}
			</Text>
			<Text
				style={styles.centerText}
				textStyle="footnote"
				color="grey03"
			>
				{i18n.t('friends.asFriendsText')}
			</Text>
		</View>
		<View style={styles.buttonContainer}>
			<Button
				testID="FriendsAdd"
				style={styles.inviteButton}
				type="primary"
				shadow="color"
				onPress={props.onInvite}
				disabled={!props.isConnected}
			>
				<Button.Icon name="friends-add" />
				<Button.Text>{i18n.t('friends.inviteFriends')}</Button.Text>
			</Button>
		</View>
	</View>
));

FriendsEmptyComponent.propTypes = {
	loading: PropTypes.bool.isRequired,
	onInvite: PropTypes.func.isRequired,
	isConnected: PropTypes.bool.isRequired,
};


export const FriendsEmpty = (props) => (
	props.isConnected ? (
		<FriendsEmptyComponent {...props} />
	) : (
		<View style={styles.container}>
			<OfflineEmpty
				title={i18n.t('common.noNetwork')}
				description={i18n.t('common.offlineRetryAgainDescription', { contentsType: i18n.t('common.contents') })}
				{...props}
			/>
		</View>
	)
);

FriendsEmpty.propTypes = {
	isConnected: PropTypes.bool.isRequired,
};
