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: 128,
	},
	loadingContainer: {
		flex: 1,
		alignItems: 'center',
		justifyContent: 'center',
	},
});

const PlaylistsEmptyComponent = (props) => (
	props.loading ? (
		<View style={styles.loadingContainer}><Loading text={i18n.t('common.loading')} withText /></View>
	) : (
		<View style={styles.container}>
			<ContentGridEmpty>
				<ContentGridEmpty.Icon name="playlist" />
				<ContentGridEmpty.Title>{i18n.t('playlists.noPlaylists')}</ContentGridEmpty.Title>
				<ContentGridEmpty.Description>{i18n.t('playlists.needCreatePlaylist')}</ContentGridEmpty.Description>
				{ props.initializing &&
					<ContentGridEmpty.Description>{i18n.t('playlists.needCreatePlaylist')}</ContentGridEmpty.Description>
				}
			</ContentGridEmpty>
			<View style={styles.buttonContainer}>
				<Button
					testID="PlaylistAdd"
					onPress={props.createNew}
					shadow="color"
				>
					<Button.Icon name="plus" />
					<Button.Text>{i18n.t('playlists.addNewPlaylist')}</Button.Text>
				</Button>
			</View>
		</View>
	)
);

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

PlaylistsEmptyComponent.defaultProps = {
	initializing: false,
};


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


PlaylistsEmpty.propTypes = {
	loading: PropTypes.bool.isRequired,
	createNew: PropTypes.func.isRequired,
	initializing: PropTypes.bool,
	isConnected: PropTypes.bool.isRequired,
};

PlaylistsEmpty.defaultProps = {
	initializing: false,
};
