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

import { color } from '~/styles/variables';

export const UserAvatar = (props) => {
	const {
		size, firstName, lastName, bgColor, color: textColor, textSize,
	} = props;
	const styles = StyleSheet.create({
		circle: {
			width: size,
			height: size,
			borderRadius: size / 2,
			backgroundColor: color[bgColor],
			alignItems: 'center',
			justifyContent: 'center',
		},
		text: {
			fontSize: textSize || (size / 2.5),
			color: color[textColor],
		},
	});
	const initial = _.toUpper(firstName.substr(0, 1) + lastName.substr(0, 1));
	return (
		<View style={styles.circle}>
			<Text style={styles.text}>{initial}</Text>
		</View>
	);
};

UserAvatar.propTypes = {
	size: PropTypes.number.isRequired,
	textSize: PropTypes.number,
	firstName: PropTypes.string,
	lastName: PropTypes.string,
	bgColor: PropTypes.string,
	color: PropTypes.string,
};

UserAvatar.defaultProps = {
	textSize: 0,
	bgColor: 'white',
	color: 'menuBlue',
	firstName: '',
	lastName: '',
};
