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

const styles = StyleSheet.create({
	container: {
		backgroundColor: 'white',
		width: '100%',
	},
	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,
	},
	separator: {
		backgroundColor: color.grey01,
		height: 1,
		width: '100%',
		marginLeft: 16,
	},
	row: {
		flex: 1,
		flexDirection: 'row',
		alignItems: 'center',
		height: 52,
	},
});

export const PlaylistItem = (props) => {
	const {
		data,
		action,
		index,
	} = props;
	const { isSelected } = data;
	const title = data.name;
	return (
		<TouchableOpacity
			style={styles.container}
			activeOpacity={0.7}
			onPress={() => { action(index, data.id); }}
		>
			<View style={styles.row}>
				<View style={[styles.mainContainer, { paddingLeft: 16, paddingRight: 16 }]}>
					<Icon
						name={(isSelected) ? 'checkbox-radiobtn-on' : 'checkbox-circle-off'}
						color={(isSelected) ? 'blue' : 'grey02'}
					/>
					<View style={styles.textContainer} >
						<Text numberOfLines={1} textStyle="body" color="mistBlue05" >{title}</Text>
					</View>
				</View>
			</View>
			<View style={styles.separator} />
		</TouchableOpacity>
	);
};

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