/** @format */
/**
 * External dependencies
 */
import classnames from 'classnames';
import { parse, stringify } from 'qs';
import PropTypes from 'prop-types';
import url from 'url';
import { isString } from 'lodash';
import crypto from 'crypto';

/**
 * Internal dependencies
 */
import './style.scss';

/**
 * Display a users Gravatar.
 *
 * @return { object } -
 */
const Gravatar = ( { alt, title, size, user, className } ) => {
	const classes = classnames( 'woocommerce-gravatar', className, {
		'is-placeholder': ! user,
	} );

	const getResizedImageURL = imageURL => {
		const parsedURL = url.parse( imageURL );
		const query = parse( parsedURL.query );

		query.s = size;
		query.d = 'mp';

		parsedURL.search = stringify( query );
		return url.format( parsedURL );
	};

	const getAvatarURLFromEmail = email => {
		return (
			'https://www.gravatar.com/avatar/' +
			crypto
				.createHash( 'md5' )
				.update( email )
				.digest( 'hex' )
		);
	};

	const altText = alt || ( user && ( user.display_name || user.name ) ) || '';

	let avatarURL = 'https://www.gravatar.com/avatar/0?s=' + size + '&d=mp';
	if ( user ) {
		avatarURL = getResizedImageURL(
			isString( user ) ? getAvatarURLFromEmail( user ) : user.avatar_URLs[ 96 ]
		);
	}

	return (
		<img
			alt={ altText }
			title={ title }
			className={ classes }
			src={ avatarURL }
			width={ size }
			height={ size }
		/>
	);
};

Gravatar.propTypes = {
	/**
	 * The address to hash for displaying a Gravatar. Can be an email address or WP-API user object.
	 */
	user: PropTypes.oneOfType( [ PropTypes.object, PropTypes.string ] ),
	/**
	 * Text to display as the image alt attribute.
	 */
	alt: PropTypes.string,
	/**
	 * Text to use for the image's title
	 */
	title: PropTypes.string,
	/**
	 * Default 60. The size of Gravatar to request.
	 */
	size: PropTypes.number,
	/**
	 * Additional CSS classes.
	 */
	className: PropTypes.string,
};

Gravatar.defaultProps = {
	size: 60,
};

export default Gravatar;