import { Placeholder, TextControl } from '@wordpress/components';
import { __experimentalNumberControl as NumberControl } from '@wordpress/components';
import { __ } from '@wordpress/i18n';
import MD5 from 'crypto-js/md5';

export default function Edit( {
	attributes,
	example,
	className,
	isSelected,
	setAttributes,
} ) {
	if ( attributes.size ) {
		var sizes = attributes.size;
	} else {
		var sizes = 200;
	}
	if ( attributes.email ) {
		var mail = attributes.email;
		var addr = mail.toLowerCase().trim();
		var hash = MD5( addr ).toString();
		var url = '//www.gravatar.com/avatar/' + hash + '?s=' + sizes;
	}
	var height = sizes + 40;
	return (
		<div className={ className }>
			{ attributes.email && ! isSelected ? (
				<figure
					className={ className }
					style={ { width: sizes + 'px', height: height + 'px' } }
				>
					<img
						src={ url }
						alt={ addr }
						width={ sizes }
						height={ sizes }
					/>
					<figcaption>{ attributes.caption }</figcaption>
				</figure>
			) : (
				<Placeholder
					label={ __( 'Gravatar', 'dnxvatar' ) }
					instructions={ __(
						'Insert at least the email address',
						'dnxvatar'
					) }
				>
					<TextControl
						placeholder={ 'danix@example.com' }
						label={ __( 'Email', 'dnxvatar' ) }
						value={ attributes.email }
						onChange={ ( val ) => setAttributes( { email: val } ) }
					/>
					<TextControl
						placeholder={ 'my profile photo' }
						label={ __( 'Alt text', 'dnxvatar' ) }
						value={ attributes.alt }
						onChange={ ( val ) => setAttributes( { alt: val } ) }
					/>
					<TextControl
						placeholder={ 'this is me...' }
						label={ __( 'Caption', 'dnxvatar' ) }
						value={ attributes.caption }
						onChange={ ( val ) =>
							setAttributes( { caption: val } )
						}
					/>
					<NumberControl
						placeholder={ '200' }
						label={ __( 'Size', 'dnxvatar' ) }
						isShiftStepEnabled={ true }
						labelPosition={ 'top' }
						onChange={ ( val ) => setAttributes( { size: val } ) }
						shiftStep={ 10 }
						value={ sizes }
					/>
				</Placeholder>
			) }
		</div>
	);
}