import React from 'react';
import _ from 'lodash';
import {
	StyleSheet,
	View,
	TouchableOpacity,
} from 'react-native';
import {
	Text,
	NixplayIcon as Icon,
	Image,
	color,
} from 'nixplay-ui-kit';
import { debounceWrapper } from '~/lib/utils';
import i18n from '~/locale/i18n';
import PropTypes from 'prop-types';
// import playlists from '../../lib/sdk/playlists';

const styles = StyleSheet.create({
	inputContainer: {
		paddingTop: 8,
		paddingLeft: 20,
		paddingRight: 20,
		paddingBottom: 12,
	},
	inputElement: {
		paddingBottom: 6,
	},
	cbContainer: {
		flex: 1,
		flexDirection: 'row',
	},
	cbContent: {
		flex: 1,
		flexDirection: 'column',
	},
	iconSpace: {
		paddingRight: 10,
	},
	plistContainer: {
		flex: 1,
		flexDirection: 'row',
		borderStyle: 'solid',
		borderWidth: 1,
		borderTopRightRadius: 4,
		borderTopLeftRadius: 4,
		borderBottomRightRadius: 4,
		borderBottomLeftRadius: 4,
		borderColor: color.borderMistBlue,
		padding: 2,
		alignItems: 'center',
		marginBottom: 20,
	},
	thumbnailsContainer: {
		margin: 5,
		alignItems: 'center',
		justifyContent: 'center',
		marginLeft: 8,
		width: 60,
		height: 60,
	},
	textContainer: {
		flex: 1,
		flexDirection: 'column',
		justifyContent: 'center',
	},
	textInput: {
		display: 'none',
	},
	thumbs: {
		// position: 'absolute',
		borderRadius: 5,
		width: 60,
		height: 60,
		overflow: 'hidden',
	},
	iconBlank: {
		position: 'absolute',
		borderRadius: 5,
		width: 25,
		height: 25,
		margin: 17.5,
	},
	errorBg: {
		backgroundColor: color.mistBlue01,
		alignItems: 'center',
		justifyContent: 'center',
	},
});

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

export const PlaylistCheckbox = (props) => {
	const {
		recent, playlist, action, select,
	} = props;
	const hasFrame = _.has(recent, 'frames');
	const title = (!_.isEmpty(recent.name)) ? recent.name : i18n.t('playlists.noPlaylistAvailable');
	let colorFrameTxt = 'blue';
	let frameTxt = i18n.t('frames.onNFrame', { count: hasFrame ? recent.frames.length : 0 });
	if (hasFrame && recent.frames.length === 0) {
		frameTxt = i18n.t('frames.noFrameAssigned');
		colorFrameTxt = 'grey02';
	}
	if (_.isEmpty(recent.name)) {
		frameTxt = i18n.t('playlists.addNewPlaylist');
	}
	const isActiveStyle = (playlist.get(0).status === true) ? '' : { opacity: 0.5 };
	const TouchableOpacityEx = debounceWrapper(TouchableOpacity);
	return (
		<View style={styles.inputContainer}>
			{/* { (!_.isEmpty(recent)) ?
			} */}
			<View style={styles.cbContainer}>
				<TouchableOpacityEx
					onPress={() => action(0)}
				>
					<Icon
						name={(playlist.get(0).status === true) ? 'checkbox-radiobtn-on' : 'checkbox-circle-off'}
						testID={(playlist.get(0).status === true) ? 'CheckboxRadiobtnOn0' : 'CheckboxCircleOff0'}
						color={(playlist.get(0).status === true) ? 'blue' : 'grey02'}
						style={styles.iconSpace}
					/>
				</TouchableOpacityEx>
				<View style={[styles.cbContent, isActiveStyle]}>
					<TouchableOpacityEx
						onPress={() => action(0)}
					>
						<Text
							style={styles.inputElement}
							color={(playlist.get(0).status === true) ? 'grey04' : 'grey02'}
							textStyle="body"
						>
							{ i18n.t('friends.defaultPlaylistWhenReceive') }
						</Text>
					</TouchableOpacityEx>
					<TouchableOpacityEx
						onPress={() => select(-1)}
						style={[styles.plistContainer]}
					>
						<View style={styles.thumbnailsContainer}>
							<ThumbNail {...recent} />
						</View>
						<View style={styles.textContainer} >
							<Text
								numberOfLines={1}
								textStyle="body"
								color={(playlist.get(0).status === true) ? 'mistBlue05' : 'grey02'}
							>{title}
							</Text>
							<View style={{ flexDirection: 'row' }}>
								<Text
									numberOfLines={1}
									textStyle="footnote"
									color={(playlist.get(0).status === true) ? colorFrameTxt : 'grey02'}
								>{frameTxt}
								</Text>
							</View>
						</View>
						<Icon name="arrow-right-thick-small" color="mistBlue05" />
					</TouchableOpacityEx>
				</View>
			</View>
			<TouchableOpacityEx
				onPress={() => action(1)}
				style={styles.cbContainer}
			>
				<Icon
					name={(playlist.get(1).status === true) ? 'checkbox-radiobtn-on' : 'checkbox-circle-off'}
					testID={(playlist.get(1).status === true) ? 'CheckboxRadiobtnOn1' : 'CheckboxCircleOff1'}
					color={(playlist.get(1).status === true) ? 'blue' : 'grey02'}
					style={styles.iconSpace}
				/>
				<View style={styles.cbContent}>
					<Text
						style={styles.inputElement}
						color={(playlist.get(1).status === true) ? 'grey04' : 'grey02'}
						textStyle="body"
					>
						{ i18n.t('playlists.doNotSend') }
					</Text>
				</View>
			</TouchableOpacityEx>
		</View>
	);
};

PlaylistCheckbox.propTypes = {
	recent: PropTypes.object.isRequired,
	playlist: PropTypes.object.isRequired,
	action: PropTypes.func.isRequired,
	select: PropTypes.func.isRequired,
};
