import React from 'react';
import {
	StyleSheet,
	View,
	TouchableOpacity,
} from 'react-native';
import {
	Text,
	NixplayIcon as Icon,
	Thumbnail,
	color,
} from 'nixplay-ui-kit';
import PropTypes from 'prop-types';
import i18n from '~/locale/i18n';


const styles = StyleSheet.create({
	container: {
		backgroundColor: 'white',
		marginTop: 8,
		marginBottom: 8,
		marginLeft: 12,
		marginRight: 12,
	},
	mainContainer: {
		flexDirection: 'row',
	},
	plistContainer: {
		flex: 1,
		flexDirection: 'row',
		alignItems: 'center',
		marginBottom: 8,
	},
	thumbnailsContainer: {
		margin: 5,
		alignItems: 'center',
		justifyContent: 'center',
		marginLeft: 8,
		width: 60,
		height: 60,
	},
	textContainer: {
		flex: 1,
		flexDirection: 'column',
		justifyContent: 'center',
		paddingLeft: 10,
	},
	thumbs: {
		position: 'absolute',
		borderRadius: 5,
		width: 60,
		height: 60,
		overflow: 'hidden',
	},
	errorBg: {
		backgroundColor: color.mistBlue01,
		alignItems: 'center',
		justifyContent: 'center',
	},
	textInput: {
		display: 'none',
	},
	iconBlank: {
		position: 'absolute',
		borderRadius: 5,
		width: 25,
		height: 25,
		margin: 17.5,
	},
});

const ImagePlaceholder = (playlist) => (
	playlist.thumbs.length === 0 ? (
		<View style={[styles.thumbs, styles.errorBg]} >
			<Icon
				name="playlist"
				testID="Playlist"
				color="mistBlue03"
				style={styles.iconBlank}
			/>
		</View>
	) : (
		playlist.thumbs.map((thumb, i) => (
			(i === 0) && <Thumbnail
				key={i.toString()}
				withProgress
				source={{ uri: thumb.url }}
				transform={[{
					rotate: `${thumb.rotation}deg`,
				}]}
				style={[styles.thumbs, { top: i * 2, right: i * 2 }]}
			/>
		))
	)
);

export const PlaylistItem = (props) => {
	const {
		data,
		action,
		index,
	} = props;
	const { status } = data;
	const title = data.name;
	let colorFrameTxt = 'blue';
	let frameTxt = i18n.t('frames.onNFrame', { count: data.frames.length });
	if (data.frames.length === 0) {
		frameTxt = i18n.t('frames.noFrameAssigned');
		colorFrameTxt = 'grey02';
	}
	return (
		<TouchableOpacity
			style={styles.container}
			activeOpacity={0.7}
			onPress={() => { action(index, data.id); }}
		>
			<View style={styles.mainContainer}>
				<View style={styles.thumbnailsContainer} >
					<ImagePlaceholder {...data} />
				</View>
				<View style={styles.textContainer} >
					<Text numberOfLines={1} textStyle="body" color="mistBlue05" >{title}</Text>
					<View style={{ flexDirection: 'row' }}>
						<Text numberOfLines={1} textStyle="footnote" color={colorFrameTxt} >{frameTxt}</Text>
					</View>
				</View>
				<Icon
					name={(status) ? 'checkbox-radiobtn-on' : 'checkbox-circle-off'}
					testID={(status) ? 'CheckboxRadiobtnOn' : 'CheckboxCircleOff'}
					color={(status) ? 'blue' : 'grey02'}
					style={{ marginTop: 20 }}
				/>
			</View>
		</TouchableOpacity>
	);
};

PlaylistItem.propTypes = {
	data: PropTypes.object.isRequired,
	action: PropTypes.func.isRequired,
	index: PropTypes.number.isRequired,
};
