import React from 'react';
import {
	StyleSheet,
	View,
} from 'react-native';
import { ContentGridEmpty } from 'nixplay-ui-kit';

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

const styles = StyleSheet.create({
	container: {
		height: '100%',
		alignItems: 'center',
	},
	loadingContainer: {
		top: 150,
		alignItems: 'center',
		justifyContent: 'center',
	},
});

const PlaylistEmptyComponent = ({ loading, playlistType, playlistCount }) => (!loading && playlistCount === 0) &&
	(
		<View style={styles.container}>
			<ContentGridEmpty>
				<ContentGridEmpty.Icon name="photos" />
				<ContentGridEmpty.Title>{playlistType === 'all' ? i18n.t('contents.noPhotos') : i18n.t('playlists.emptyPlaylist')}</ContentGridEmpty.Title>
				<ContentGridEmpty.Description>
					{playlistType === 'normal' && i18n.t('contents.letsAddFirstPhoto')}
				</ContentGridEmpty.Description>
			</ContentGridEmpty>
		</View>
	);

PlaylistEmptyComponent.propTypes = {
	playlistType: PropTypes.string,
	loading: PropTypes.bool,
	playlistCount: PropTypes.number,
};

PlaylistEmptyComponent.defaultProps = {
	playlistType: 'normal',
	loading: false,
	playlistCount: 1,
};


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

PlaylistEmpty.propTypes = {
	playlistType: PropTypes.string,
	loading: PropTypes.bool,
	isConnected: PropTypes.bool,
};

PlaylistEmpty.defaultProps = {
	playlistType: 'normal',
	loading: false,
	isConnected: true,
};

