import React from 'react';
import {
	StyleSheet,
	View,
	ActivityIndicator,
	StatusBar,
} from 'react-native';
import { ContentGridEmpty, Button, Text, color } from 'nixplay-ui-kit';

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


const styles = StyleSheet.create({
	container: {
		height: '100%',
		flex: 1,
		alignItems: 'center',
		marginHorizontal: 48,
	},
	loadingContainer: {
		flex: 1,
		alignItems: 'center',
		justifyContent: 'center',
	},
	button: {
		marginVertical: 10,
	},
	description: {
		marginHorizontal: 56,
	},
	circle: {
		padding: 2,
	},
});

export const FrameEmpty = (props) => (
	props.loading ? (
		<View style={styles.loadingContainer}>
			<StatusBar networkActivityIndicatorVisible barStyle="dark-content" />
			<ActivityIndicator size="large" color={color.blue} />
			<Text textStyle="body" color="black" style={styles.text}>
				{i18n.t('frames.lookingForyourFrame')}
			</Text>
		</View>
	) : (
		<View style={styles.container}>
			<View style={{
				flex: 1,
			}}
			>
				<ContentGridEmpty>
					<ContentGridEmpty.Icon name="frame" />
					<ContentGridEmpty.Title>{i18n.t('frames.noFramesFound')}</ContentGridEmpty.Title>
					<ContentGridEmpty.Description style={styles.description}>{i18n.t('frames.noFrameFoundDescription')}</ContentGridEmpty.Description>
				</ContentGridEmpty>
				<Button
					testID="Search"
					style={styles.button}
					type="primary"
					onPress={props.tryToSearchAgain}
					shadow="long"
				>
					<Button.Icon color="white" name="search" />
					<Button.Text color="white" textStyle="header" >{i18n.t('frames.searchAgain')}</Button.Text>
				</Button>

				<Button
					testID="EnterSerialNumber"
					style={styles.button}
					type="secondary"
					onPress={props.enterSerialNumber}
				>
					<Button.Text color="blue" textStyle="header" >{i18n.t('frames.enterSerialNumber')}</Button.Text>
				</Button>
			</View>

		</View>
	)
);

FrameEmpty.propTypes = {
	loading: PropTypes.bool.isRequired,
	tryToSearchAgain: PropTypes.func.isRequired,
	enterSerialNumber: PropTypes.func.isRequired,
};
