import React from 'react';
import _ from 'lodash';
import {
	StyleSheet,
	View,
	TouchableOpacity,
} from 'react-native';
import {
	Avatar,
	Text,
	color,
} from 'nixplay-ui-kit';
import PropTypes from 'prop-types';
import moment from 'moment/min/moment-with-locales';
import i18n from '~/locale/i18n';
import { activityMessage } from '~/lib/activities';
import { debounceWrapper } from '~/lib/utils';
import { Badge } from './badge';

const TouchableOpacityEx = debounceWrapper(TouchableOpacity);

const styles = StyleSheet.create({
	container: {
		backgroundColor: 'transparent',
		marginTop: 8,
		marginBottom: 8,
		marginLeft: 20,
		marginRight: 20,
		flexDirection: 'row',
	},
	mainContainer: {
		flex: 1,
		flexDirection: 'row',
	},
	avatarContainer: {
		width: 56,
		height: 56,
		aspectRatio: 1,
	},
	avatar: {
		aspectRatio: 1,
	},
	avatarBadge: {
		position: 'absolute',
		right: 0,
		top: 0,
		width: 12,
		height: 12,
		backgroundColor: color.red,
	},
	textContainer: {
		marginLeft: 11,
		marginTop: 5,
		marginBottom: 5,
		position: 'relative',
		flex: 1,
	},
	rowContainer: {
		flex: 1,
		flexDirection: 'row',
		alignItems: 'stretch',
	},
	activityText: {
		flex: 1,
		marginRight: 4,
	},
	nameText: {
		flex: 1,
		marginRight: 4,
	},
	timeIndicator: {
		position: 'relative',
		top: 0,
		right: 0,
		alignSelf: 'flex-start',
	},
});


const FriendListItemComponent = (props) => {
	const { friend, onPress } = props;
	const lastSeenTimestamp = friend.lastSeenTimestamp ? friend.lastSeenTimestamp : 0;
	let firstName = '';
	let lastName = '';

	if (friend.fullName) {
		firstName = friend.fullName.split(' ').slice(0, -1).join(' ');
		lastName = friend.fullName.split(' ').slice(-1).join(' ');
	}

	function renderActivityText() {
		let status = '';
		if (friend.activity) {
			status = activityMessage(friend.activity);
		} else if (friend.status === 'pending') {
			status = i18n.t('common.waitingAcceptance');
		}
		return status;
	}

	function getTimestamp() {
		let outputTimestamp;
		moment.locale(`${props.languageCode}`);
		if (friend.activity) {
			outputTimestamp = friend.activity.timestamp;
		} else if (friend.requestTimestamp) {
			outputTimestamp = friend.requestTimestamp;
		}
		if (outputTimestamp > 0) {
			if (outputTimestamp > moment().utc().valueOf()) {
				outputTimestamp = moment().utc().valueOf() - 1;
			}
			return moment(outputTimestamp).fromNow();
		}
		return '';
	}

	function onItemPress() {
		onPress(friend);
	}

	const { activity, avatar } = friend;
	const isBadged = friend.activity && activity.sender !== ' ' && lastSeenTimestamp < friend.activity.timestamp;
	const sourceUri = (!_.isEmpty(avatar) && avatar.url.indexOf('ui-avatars') === -1) ? avatar.url : null;
	return (
		<TouchableOpacityEx
			style={styles.container}
			activeOpacity={0.7}
			onPress={() => { onItemPress(); }}
		>
			<View style={styles.mainContainer}>
				<View style={styles.avatarContainer}>
					<Avatar
						firstName={firstName}
						lastName={lastName}
						size="default"
						source={sourceUri ? { uri: sourceUri } : null}
					/>
					{isBadged &&
					<Badge
						style={styles.avatarBadge}
					/>
					}
				</View>
				<View style={styles.textContainer}>
					<View style={styles.rowContainer}>
						<Text
							style={styles.nameText}
							numberOfLines={2}
							textStyle="body"
							color="mistBlue05"
							isSensitive
						>
							{friend.fullName}
						</Text>
						{(friend.activity || friend.requestTimestamp) &&
						<Text
							style={styles.timeIndicator}
							textStyle="description"
							textAlign="right"
							numberOfLines={2}
							color="grey03"
						>
							{ getTimestamp() }
						</Text>
						}
					</View>
					<View style={styles.rowContainer}>
						<Text
							style={styles.activityText}
							numberOfLines={2}
							textStyle="footnote"
							color="grey03"
							isSensitive
						>
							{ renderActivityText() }
						</Text>
					</View>
				</View>
			</View>
		</TouchableOpacityEx>
	);
};

FriendListItemComponent.propTypes = {
	friend: PropTypes.object.isRequired,
	languageCode: PropTypes.string,
	onPress: PropTypes.func.isRequired,
};

FriendListItemComponent.defaultProps = {
	languageCode: 'en',
};

export const FriendListItem = React.memo(FriendListItemComponent);
