import React from 'react';
import {
	StyleSheet,
	View,
	TouchableOpacity,
} from 'react-native';
import {
	Avatar,
	Text,
	NixplayIcon as Icon,
	color,
	transparentize,
} from 'nixplay-ui-kit';
import PropTypes from 'prop-types';
import { debounceWrapper } from '~/lib/utils';

const TouchableOpacityEx = debounceWrapper(TouchableOpacity);

const styles = StyleSheet.create({
	container: {
		backgroundColor: 'white',
		paddingTop: 8,
		paddingLeft: 20,
		paddingRight: 20,
		paddingBottom: 8,
		flexDirection: 'row',
	},
	highlighted: {
		backgroundColor: color.mistBlue02,
	},
	mainContainer: {
		flex: 1,
		flexDirection: 'row',
	},
	avatar: {
		width: 56,
		height: 56,
		aspectRatio: 1,
	},
	textContainer: {
		marginLeft: 7,
		marginRight: 7,
		marginTop: 5,
		position: 'relative',
		left: 4,
		right: 4,
		flex: 1,
	},
	accessoryContainer: {
		flexDirection: 'row',
		justifyContent: 'center',
		alignItems: 'center',
	},
	ctaButton: {
		width: 32,
		height: 32,
		alignSelf: 'center',
		alignItems: 'center',
		justifyContent: 'center',
		borderRadius: 16,
	},
});


export const InviteListItem = ({
	isConnected,
	invite,
	highlighted,
	status,
	onAccept,
	onReject,
}) => {
	function onRejectInvite() {
		onReject(invite);
	}

	function onAcceptInvite() {
		onAccept(invite);
	}
	return (
		<TouchableOpacityEx
			style={[styles.container, highlighted ? styles.highlighted : null]}
			activeOpacity={0.7}
		>
			<View style={styles.mainContainer}>
				<View style={styles.avatar}>
					<Avatar
						firstName={invite.requesterFirstName}
						lastName={invite.requesterLastName}
						size="default"
					/>
				</View>
				<View style={styles.textContainer}>
					<Text
						numberOfLines={1}
						textStyle="body"
						color="mistBlue05"
						isSensitive
					>
						{invite.requesterFirstName} {invite.requesterLastName}
					</Text>
					<Text
						numberOfLines={2}
						textStyle="footnote"
						color="grey03"
					>
						{status}
					</Text>
				</View>
				<View style={styles.accessoryContainer}>
					<TouchableOpacityEx
						style={[
							styles.ctaButton,
							{
								backgroundColor: isConnected ? color.blue : transparentize(color.blue, 50),
								marginRight: 16,
							},
						]}
						activeOpacity={0.7}
						onPress={onAcceptInvite}
						disabled={!isConnected}
					>
						<Icon
							size={16}
							name="check"
							testID="Check"
							color={color.white}
						/>
					</TouchableOpacityEx>
					<TouchableOpacityEx
						style={[
							styles.ctaButton,
							{
								borderWidth: 1,
								borderColor: isConnected ? color.red : transparentize(color.red, 50),
							},
						]}
						activeOpacity={0.7}
						onPress={onRejectInvite}
						disabled={!isConnected}
					>
						<Icon
							size={16}
							name="close"
							testID="Close"
							color={isConnected ? color.red : transparentize(color.red, 50)}
						/>
					</TouchableOpacityEx>
				</View>
			</View>
		</TouchableOpacityEx>
	);
};

InviteListItem.defaultProps = {
	highlighted: false,
	isConnected: true,
	status: '',
};

InviteListItem.propTypes = {
	invite: PropTypes.object.isRequired,
	highlighted: PropTypes.bool,
	status: PropTypes.string,
	onAccept: PropTypes.func.isRequired,
	onReject: PropTypes.func.isRequired,
	isConnected: PropTypes.bool,
};
