import React from 'react';
import { View, StyleSheet, Text, Platform, Image } from 'react-native';
import _ from 'lodash';
import PropTypes from 'prop-types';

import { color } from '~/styles/variables';
import RedDot from '~/components/redDot';

const styles = StyleSheet.create({
	container: {
		justifyContent: 'center',
		borderWidth: 2,
		borderColor: color.white,
		borderRadius: 10,
		overflow: 'hidden',
	},
	small: {
		borderRadius: 18,
		width: 36,
		height: 36,
	},
	smallRadius: {
		borderRadius: 18,
	},
	default: {
		borderRadius: 28,
		width: 56,
		height: 56,
	},
	defaultRadius: {
		borderRadius: 28,
	},
	large: {
		borderRadius: 36,
		width: 72,
		height: 72,
	},
	largeRadius: {
		borderRadius: 36,
	},
	text: {
		textAlign: 'center',
	},
	image: {
		width: '100%',
		height: '100%',
	},
	avatarContainer: {
		width: 36,
		height: 36,
		position: 'relative',
		bottom: 0,
		left: 0,
		aspectRatio: 1,
		alignSelf: 'flex-end',
	},
	avatar: {
		aspectRatio: 1,
		width: 32,
		height: 32,
	},

	title1: {
		fontSize: 28,
		lineHeight: 34,
		letterSpacing: 0.364,
		fontWeight: '300',
	},
	title2: {
		fontSize: 22,
		lineHeight: 28,
		letterSpacing: 0.352,
	},
	subhead: {
		fontSize: 15,
		lineHeight: 20,
		letterSpacing: -0.24,
	},
	countContainer: {
		flexDirection: 'row-reverse',
	},
	withShadow: {
		...Platform.select({
			ios: {
				shadowColor: color.grayDark,
				shadowOpacity: 0.23,
				shadowRadius: 2.62,
				shadowOffset: {
					width: 0,
					height: 2,
				},
			},
			android: {
				elevation: 4,
			},
		}),
	},
});

export const Avatar = (props) => {
	const initial = (props.firstName.substr(0, 1) + props.lastName.substr(0, 1)).toUpperCase();
	const isImage = props.source !== null;
	let textSize = styles.title2;
	switch (props.size) {
		case 'large': textSize = styles.title1; break;
		case 'small': textSize = styles.subhead; break;
		default: textSize = styles.title2;
	}
	return (
		<View>
			{ props.isNew && <RedDot scale={0.9} margin={1} />}
			<View
				{...props}
				style={[
					styles.container,
					props.style,
					styles[props.size],
					styles[`${props.size}Radius`],
					(props.withShadow && styles.withShadow),
					{
						backgroundColor: props.index % 2 ? color.mistBlue03 : color.mistBlue02,
						opacity: props.isTranslucent ? 0.5 : 1,
					},
				]}
			>
				{!isImage ? (
					<Text style={[styles.text, textSize, { color: color.mistBlue04 }]}>{initial}</Text>
				) : (
					<Image {...props} resizeMode="contain" style={[styles.image, styles[`${props.size}Radius`]]} source={props.source} />
				)
				}
			</View>
		</View>
	);
};

Avatar.propTypes = {
	index: PropTypes.number,
	firstName: PropTypes.string,
	lastName: PropTypes.string,
	size: PropTypes.oneOf(['default', 'large', 'small']),
	source: PropTypes.any,
	style: PropTypes.any,
	isTranslucent: PropTypes.bool,
	withShadow: PropTypes.bool,
	isNew: PropTypes.bool,
};

Avatar.defaultProps = {
	index: 0,
	withShadow: false,
	firstName: '',
	lastName: '',
	size: 'small',
	source: null,
	style: {},
	isTranslucent: false,
	isNew: false,
};

export const AvatarCount = (props) => {
	const avatarPreview = [...props.avatars];
	// host + 4 friends
	if (avatarPreview.length > 5) {
		const hiddenAvatars = avatarPreview.splice(4, avatarPreview.length - 4);
		const isNewAudienceIncluded = hiddenAvatars.find(ava => ava.isNewAudience === true);
		avatarPreview.push({ firstName: '+', lastName: `${hiddenAvatars.length}`, isNewAudience: Boolean(isNewAudienceIncluded) });
	}
	return (
		<View style={[props.style, styles.countContainer]}>
			{avatarPreview.reverse().map((avatar, index) => {
				let source = null;
				if (!_.isEmpty(avatar.source)) {
					const { uri } = avatar.source;
					source = uri ? { uri } : null;
				}
				return (<Avatar
					{...props}
					/* eslint-disable */
					key={`${avatar.firstName}-${avatar.lastName}-${index}`}
					/* eslint-enable */
					firstName={avatar.firstName}
					lastName={avatar.lastName}
					source={source}
					size={avatar.size}
					isTranslucent={!avatar.isAccepted}
					style={{ marginLeft: props.stackable && -4 }}
					index={index}
					isNew={avatar.isNewAudience}
				/>);
			})}
		</View>
	);
};

AvatarCount.propTypes = {
	avatars: PropTypes.array,
	stackable: PropTypes.bool,
	style: PropTypes.any,
};

AvatarCount.defaultProps = {
	avatars: [],
	stackable: false,
	style: {},
};

export const mapAvatarFromProps = ({ sharing, newAudience = {} }) => {
	const { contributors, invites, owner } = sharing;
	let mapInvites = [];
	let mapContributor = [];

	if (!_.isEmpty(contributors)) {
		mapContributor = contributors.map((value) => {
			const { username } = value;
			const name = value.fullName.split(' ');
			const sourceVal = (_.has(value, 'avatar') && _.has(value.avatar, 'url') && value.avatar.url.indexOf('ui-avatars') === -1) ? { uri: value.avatar.url } : null;
			return {
				firstName: !_.isEmpty(name) ? name[0].charAt(0) : '',
				lastName:
				(name.length > 1 ? name[name.length - 1].charAt(0) :
					''),
				isAccepted: true,
				source: sourceVal,
				isNewAudience: Boolean(newAudience[username]),
				// source: { uri: (_.has(value, 'avatar')) ? value.avatar.url : null },
			};
		});
	}

	if (!_.isEmpty(invites)) {
		mapInvites = invites.map((value) => {
			const name = value.fullName.split(' ');
			const sourceVal = (_.has(value, 'avatar') && _.has(value.avatar, 'url') && value.avatar.url.indexOf('ui-avatars') === -1) ? { uri: value.avatar.url } : null;
			return {
				firstName: name[0].charAt(0),
				lastName:
				(name.length > 1 ? name[name.length - 1].charAt(0) :
					''),
				isAccepted: false,
				source: sourceVal,
				isNewAudience: false,
				// source: { uri: (_.has(value, 'avatar')) ? value.avatar.url : null },
			};
		});
	}

	const avatarUrl = (_.has(owner, 'avatar') && _.has(owner.avatar, 'url') && owner.avatar.url.indexOf('ui-avatars') === -1) ? { uri: owner.avatar.url } : null;
	const ownerObj = {
		firstName: owner.firstName,
		lastName: owner.lastName,
		isAccepted: true,
		source: avatarUrl,
	};

	return [...ownerObj, ...mapContributor, ...mapInvites];
};
