import React from 'react';
import {
	StyleSheet,
	View,
} from 'react-native';
import { ContentGridEmpty, Loading } 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',
		paddingBottom: 64,
	},
	loadingContainer: {
		height: '100%',
		alignItems: 'center',
		justifyContent: 'center',
	},
});

const AlbumEmptyComponent = ({ loading, count }) => (loading || count ? (
	<View style={styles.loadingContainer}><Loading text={i18n.t('common.loading')} withText /></View>
) : (
	<View style={styles.container}>
		<ContentGridEmpty>
			<ContentGridEmpty.Icon name="photos" />
			<ContentGridEmpty.Title>{i18n.t('albums.emptyAlbum')}</ContentGridEmpty.Title>
			<ContentGridEmpty.Description>{i18n.t('contents.letsAddFirstPhoto')}</ContentGridEmpty.Description>
		</ContentGridEmpty>
	</View>
));

AlbumEmptyComponent.propTypes = {
	loading: PropTypes.bool,
	count: PropTypes.any,
};

AlbumEmptyComponent.defaultProps = {
	loading: true,
	count: 0,
};


export const AlbumEmpty = (props) => (props.isConnected ? (
	<AlbumEmptyComponent {...props} />
) : (
	<OfflineEmpty {...props} />
));

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

AlbumEmpty.defaultProps = {
	loading: true,
};
