import React from 'react';
import {
	StyleSheet,
	View,
	TouchableOpacity,
} from 'react-native';
import {
	Avatar,
	Text,
	color,
} from 'nixplay-ui-kit';
// import _ from 'lodash';
import PropTypes from 'prop-types';
import moment from 'moment';
import i18n from '~/locale/i18n';

// import { getSourceAvatar } from '~/lib/utils';

const styles = StyleSheet.create({
	container: {
		backgroundColor: 'transparent',
		marginLeft: 9,
		marginRight: 9,
		paddingTop: 4,
		paddingBottom: 4,
		flexDirection: 'row',
	},
	mainContainer: {
		flex: 1,
		flexDirection: 'row',
	},
	avatarContainer: {
		width: 36,
		height: 36,
		position: 'relative',
		bottom: 0,
		left: 0,
		aspectRatio: 1,
		alignSelf: 'flex-end',
	},
	avatar: {
		aspectRatio: 1,
		width: 32,
		height: 32,
	},
	badge: {
		alignSelf: 'center',
	},
	avatarBadgeContainer: {
		position: 'absolute',
		right: 0,
		bottom: 0,
		width: 16,
		height: 16,
		marginRight: 4,
		alignItems: 'center',
		justifyContent: 'center',
		borderRadius: 8,
		overflow: 'hidden',
		backgroundColor: color.green,
	},
	meBadgeContainer: {
		width: 24,
		height: 24,
		alignSelf: 'flex-end',
		justifyContent: 'center',
		borderRadius: 16,
		marginLeft: 4,
		backgroundColor: color.mistBlue03,
		overflow: 'hidden',
	},
	meBadgeText: {
		alignSelf: 'center',
	},
	contentContainer: {
		flex: 1,
		flexDirection: 'row',
		alignItems: 'stretch',
		marginTop: 5,
		marginBottom: 5,
	},
	contentColumn: {
		flex: 1,
		flexDirection: 'column',
		justifyContent: 'center',
	},
	content: {
		padding: 12,
		borderRadius: 8,
	},
	rowContainer: {
		flex: 1,
		flexDirection: 'row',
		alignItems: 'flex-end',
		marginRight: 14,
	},
	rowContent: {
		flexDirection: 'row',
	},
	activityText: {
		flex: 1,
		marginRight: 4,
	},
	nameText: {
		flex: 1,
		marginRight: 4,
	},
	timeIndicator: {
		position: 'relative',
		top: 0,
		right: 0,
		marginBottom: 4,
	},
});


export const CommentItem = (props) => {
	const { comment, isOutgoing, fullName } = props;
	const firstName = fullName.split(' ').slice(0, -1).join(' ');
	const lastName = fullName.split(' ').slice(-1).join(' ');
	const alignment = isOutgoing ? 'flex-end' : 'flex-start';
	const contentBackgroundColor = isOutgoing ? color.mistBlue02 : color.grey01;
	const leftContentMargin = isOutgoing ? 35 : 0;
	const rightContentMargin = isOutgoing ? 0 : 35;

	function renderTimestampText() {
		if (isOutgoing) {
			return `${i18n.t('common.me')} · ${moment(comment.timestamp).fromNow()}`;
		}
		return `${firstName} · ${moment(comment.timestamp).fromNow()}`;
	}
	return (
		<TouchableOpacity
			style={styles.container}
			activeOpacity={0.7}
		>
			<View style={styles.mainContainer}>
				{!isOutgoing &&
				<View style={styles.avatarContainer}>
					<Avatar
						style={styles.avatar}
						firstName={firstName}
						lastName={lastName}
						size="small"
						source={null}
					/>
				</View>
				}
				<View style={styles.contentContainer}>
					<View style={[styles.contentColumn, { alignItems: alignment }]}>
						<Text
							style={[styles.timeIndicator]}
							textStyle="description"
							textAlign="left"
							numberOfLines={1}
							color="grey03"
						>
							{renderTimestampText()}
						</Text>
						<View style={[styles.content,
							{
								backgroundColor: contentBackgroundColor,
								marginLeft: leftContentMargin,
								marginRight: rightContentMargin,
							}]}
						>
							<View style={styles.rowContent}>
								<Text
									textStyle="subhead"
									textAlign={isOutgoing ? 'right' : 'left'}
								>
									{comment.comment}
								</Text>
							</View>
						</View>
					</View>
				</View>
			</View>
		</TouchableOpacity>
	);
};

CommentItem.propTypes = {
	comment: PropTypes.object.isRequired,
	isOutgoing: PropTypes.bool.isRequired,
	fullName: PropTypes.string.isRequired,
};
