import React from 'react';
import { StyleSheet } from 'react-native';
import { ContentCoverGridItem, ContentCount, Text, Label } from 'nixplay-ui-kit';
import PropTypes from 'prop-types';
import _ from 'lodash';
import {
	SYNC_ACCOUNT_DISCONNECTED,
	SYNC_ALBUM_NOT_FOUND,
	SYNC_SUCCESS,
	SYNC_IN_PROGRESS,
	SYNC_INIT,
} from '~/store/dynamicPlaylistStates';
import { NORMAL } from '~/store/contentTypes';
import i18n from '~/locale/i18n';


const styles = StyleSheet.create({
	label: { marginLeft: 4 },
});

function getSyncInfo(defaultCounts, playlist) {
	if (playlist.meta.uploading) {
		return { state: 'processing', counts: [{ icon: '', text: i18n.t('contents.contentUploading') }] };
	} else if (playlist.trackerId) {
		return { state: 'processing', counts: [{ icon: '', text: i18n.t('playlists.playlistPreparing') }] };
	}
	switch (playlist.status) {
		case SYNC_ALBUM_NOT_FOUND: {
			return { state: playlist.status, counts: [...defaultCounts, { icon: 'invalid', text: i18n.t('albums.albumNotFound') }] };
		}
		case SYNC_ACCOUNT_DISCONNECTED: {
			return { state: playlist.status, counts: [...defaultCounts, { icon: 'account-disconnected', text: i18n.t('users.accountDisconnected') }] };
		}
		case SYNC_SUCCESS: {
			return { state: playlist.status, counts: [...defaultCounts, { icon: 'clock', text: i18n.t('common.lastUpdated', { lastSynced: playlist.lastSynced }) }] };
		}
		case SYNC_IN_PROGRESS: {
			return { state: playlist.status, counts: [...defaultCounts, { icon: 'refresh', spin: true, text: i18n.t('common.syncing') }] };
		}
		case SYNC_INIT: {
			return { state: playlist.status, counts: [{ icon: '', text: i18n.t('common.takeWhile') }] };
		}
		default: {
			return { counts: defaultCounts };
		}
	}
}

export const PlaylistGridItem = (props) => {
	const { playlist, googleId } = props;
	const defaultCounts = [
		{ icon: 'photo-small', text: playlist.count },
		{
			icon: 'frame-small',
			text: playlist.frames.length,
		},
	];
	const isFull = playlist.type === NORMAL && playlist.count >= playlist.maxSlides;
	if (isFull) {
		defaultCounts[0].color = 'yellow';
	}
	const playlistState = getSyncInfo(defaultCounts, playlist, googleId);
	return (
		<ContentCoverGridItem
			{...props}
			name={playlist.name}
			testID={playlist.name}
			thumbs={playlist.thumbs}
			emptyIcon="playlist"
			emptyText={playlist.status === SYNC_INIT || !_.isEmpty(playlist.trackerId) ? `${i18n.t('common.initializing')}...` : ''}
			openContent={() => { props.openPlaylist(playlist.id); }}
		>
			{playlist.type !== 'normal' &&
				<ContentCoverGridItem.LabelStamp labelColor="blue">
					<Text>{i18n.t('common.from', { source: playlist.mediaName })}</Text>
				</ContentCoverGridItem.LabelStamp>}
			<ContentCoverGridItem.Line2>
				<ContentCount counts={playlistState.counts} />
				{isFull &&
					<Label labelColor="yellow" size="small" style={styles.label}>
						<Text>{i18n.t('playlists.playlistFull')}</Text>
					</Label>}
			</ContentCoverGridItem.Line2>
		</ContentCoverGridItem>
	);
};

PlaylistGridItem.propTypes = {
	playlist: PropTypes.object.isRequired,
	openPlaylist: PropTypes.func,
	assignToFrame: PropTypes.func,
	googleId: PropTypes.string,
};

PlaylistGridItem.defaultProps = {
	googleId: '',
	openPlaylist: () => { },
	assignToFrame: () => { },
};
