import React from 'react';
import {
	StyleSheet,
	View,
} from 'react-native';
import { ContentGridEmpty, Loading, Button } 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',
	},
	buttonContainer: {
		height: 144,
	},
	loadingContainer: {
		flex: 1,
		alignItems: 'center',
		justifyContent: 'center',
	},
});

const AlbumsEmptyComponent = (props) => (props.loading ? (
	<View style={styles.loadingContainer}><Loading text={i18n.t('common.loading')} withText /></View>
) : (
	<View style={styles.container}>
		<ContentGridEmpty>
			<ContentGridEmpty.Icon name="album" />
			<ContentGridEmpty.Title>{i18n.t('albums.noAlbums')}</ContentGridEmpty.Title>
			<ContentGridEmpty.Description>{i18n.t('albums.needCreateAlbum')}</ContentGridEmpty.Description>
		</ContentGridEmpty>
		{typeof props.createNew === 'function' &&
		<View style={styles.buttonContainer}>
			<Button
				testID="AddNewAlbum"
				onPress={props.createNew}
				shadow="color"
			>
				<Button.Icon name="plus" />
				<Button.Text>{i18n.t('albums.addNewAlbum')}</Button.Text>
			</Button>
		</View>}
	</View>
));

AlbumsEmptyComponent.propTypes = {
	loading: PropTypes.bool.isRequired,
	createNew: PropTypes.func,
};

AlbumsEmptyComponent.defaultProps = {
	createNew: null,
};

export const AlbumsEmpty = (props) => (
	props.isConnected ? (
		<AlbumsEmptyComponent {...props} />
	) : (
		<View style={styles.container}>
			<OfflineEmpty {...props} />
		</View>
	)
);

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