/**
 * BLOCK: Review Block
 */
const { __ } = wp.i18n;
const { registerBlockType } = wp.blocks;
const el = wp.element.createElement;
import { Component, Fragment } from '@wordpress/element';
const {
	RichText,
	InspectorControls,
	MediaUpload,
	MediaUploadCheck,
	BlockControls,
	PanelColorSettings,
	BlockAlignmentToolbar
} = wp.editor;

const {
	SelectControl,
	ToggleControl,
	TextControl,
	Button,
	PanelBody,
} = wp.components;

const iconEl = el('svg', { width: 20, height: 20 },
  el('path', { d: "M19,0 C19.5522847,-1.01453063e-16 20,0.44771525 20,1 L20,19 C20,19.5522847 19.5522847,20 19,20 L1,20 C0.44771525,20 6.76353751e-17,19.5522847 0,19 L0,1 C-6.76353751e-17,0.44771525 0.44771525,1.01453063e-16 1,0 L19,0 Z M18,2 L2,2 L2,18 L18,18 L18,2 Z M10,5 L11.4694631,7.97745751 L14.7552826,8.45491503 L12.3776413,10.7725425 L12.9389263,14.045085 L10,12.5 L7.06107374,14.045085 L7.62235871,10.7725425 L5.24471742,8.45491503 L8.53053687,7.97745751 L10,5 Z" } )
);

class letsReviewBox extends Component {

	constructor() {
		super( ...arguments );
	}

	componentDidMount() {
		const { setAttributes, attributes } = this.props;
		if ( attributes.uid === 123 ) {
			setAttributes({
				uid: Math.floor(Math.random() * (999999 - 100000 + 1) + 100000)
			})
		}
	}

	render() {
		const { setAttributes, attributes } = this.props;

		function blockAdder( type ) {
			let blocks;
			blocks = JSON.parse( JSON.stringify(attributes[type]) )
			if ( type === 'crits' ) {
				blocks.push( { outof5: '0', outof10: '0', outof100: '0', title: ''})
			} else {
				blocks.push( { content: '' })
			}
			setAttributes({
				[type]: blocks
			})
		}

		function critStyles( value ) {
			let output = 'lets-review-block__crit with--remover';
			if ( 6 == design ) {
				if ( value < 34 ) {
					output += ' level-1';
				} else if ( value < 75 ) {
					output += ' level-5';
				} else {
					output += ' level-10';
				}
			}
			return output
		}

		function scoreSetter( type, max, value ) {
			if ( value > max ) {
				value = max;
			} else if ( value < 0 ) {
				value = '0';
			}
			var outof100, outof10, outof5;
			if ( parseInt( attributes.scoreType ) === 1 ) {
				outof5 = value / 20;
				outof10 = value / 10;
				outof100 = value;
			} else if ( parseInt( attributes.scoreType ) === 2 ) {
				outof5 = value / 2;
				outof10 = value;
				outof100 = value * 10;
			} else {
				outof5 = value;
				outof10 = value * 2;
				outof100 = value * 20;
			}

			var score = {
				outof5: outof5,
				outof10: outof10,
				outof100: Math.round( outof100 )
			};
			setAttributes({
				score: score
			})
		}
		function blockEditor( index, type, key, max, value ) {
			let blocks = JSON.parse( JSON.stringify( attributes[type] ) )
			if ( type === 'crits' && key.startsWith( 'outof' ) ) {
				if ( value > max ) {
					value = max;
				} else if ( value < 0 ) {
					value = '0';
				}
				var outof100, outof10, outof5;
				if ( parseInt( attributes.scoreType ) === 1 ) {
					outof5 = value / 20;
					outof10 = value / 10;
					outof100 = value;
				} else if ( parseInt( attributes.scoreType ) === 2 ) {
					outof5 = value / 2;
					outof10 = value;
					outof100 = value * 10;
				} else {
					outof5 = value;
					outof10 = value * 2;
					outof100 = value * 20;
				}

				blocks[index]['outof5'] = outof5;
				blocks[index]['outof10'] = outof10;
				blocks[index]['outof100'] = Math.round( outof100 );
			} else {
				blocks[index][key] = value
			}
			setAttributes({
				[type]: blocks
			})
			if ( type === 'crits' && key.startsWith( 'outof' ) ) {
				let outof100 = 0;
				for (var i = blocks.length - 1; i >= 0; i--) {
					outof100 += Number( blocks[i]['outof100'] );
				}
				outof100 = outof100 / blocks.length;
				var score = {
					outof5: Math.round( outof100 ) / 20,
					outof10: Math.round( outof100 ) / 10,
					outof100: Math.round( outof100 )
				};
				setAttributes({
					score: score
				})
			}
		}

		function blockRemover( type, index ) {
			var r = confirm( __( 'Are you sure you want to delete this?' ) );
			if ( r === true ) {
				let blocks = JSON.parse( JSON.stringify( attributes[type] ) )
				blocks.splice( index, 1 )
				setAttributes({
					[type]: blocks
				})
			}
		}

		function onScoreType( value ) {
			setAttributes( { scoreType: value } )
			let blocks = JSON.parse( JSON.stringify( attributes['crits'] ) )
			setAttributes({
				'crits': blocks
			})

		}

		function onDesign( scoreType, value  ) {
			if ( parseInt( value ) === 6 && scoreType > 2 ) {
				setAttributes( { scoreType: 1 } )
			}
			setAttributes( { design: value } )
		}

		function onImageSelect( attr, imageObject) {
			var thumb;
			if ( typeof imageObject.sizes.medium !== 'undefined' && imageObject.sizes.medium.width > 0 ) {
				thumb = imageObject.sizes.medium.url;
			} else if ( typeof imageObject.sizes.full !== 'undefined' && imageObject.sizes.full.width > 0 ) {
				thumb = imageObject.sizes.full.url
			} else if ( typeof imageObject.sizes.thumbnail !== 'undefined' && imageObject.sizes.thumbnail.width > 0 ) {
				thumb = imageObject.sizes.thumbnail.url
			}
			if ( attr === 'bg' ) {
				thumb = imageObject.sizes.full.url;
			}
			setAttributes({
				[ attr + 'ID']: imageObject.id,
				[ attr + 'Thumb']: thumb
			})
		}
		function onRemoveGallery( value ) {

		}
		function onGallerySelect( prop, value ) {
			var output = [];
			for (var i = value.length - 1; i >= 0; i--) {
				var thumb = value[i].sizes.full.url;
				if ( typeof value[i].sizes.medium !== 'undefined' && value[i].sizes.medium.width > 0 ) {
					thumb = value[i].sizes.medium.url;
				} else if ( typeof value[i].sizes.full !== 'undefined' && value[i].sizes.full.width > 0 ) {
					thumb = value[i].sizes.full.url
				} else if ( typeof value[i].sizes.thumbnail !== 'undefined' && value[i].sizes.thumbnail.width > 0 ) {
					thumb = value[i].sizes.thumbnail.url
				}
				output.push( { 'id': value[i]['id'], 'thumb': thumb } );
			}
			setAttributes({
				[prop]: output
			})
		}

		let critsOn = true,
			bgImgOn = false,
			barsAniOn = true,
			skin = parseInt( attributes.skin ),
			scoreType = parseInt( attributes.scoreType ),
			scoreOverlayWrapClass = scoreType < 3 ? 'score-overlay-wrap score-overlay-wrap__bar' : 'score-overlay-wrap score-overlay-wrap__icon',
			scoreTypeOptions = [
				{ label: __( 'Percentage' ), value: '1' },
				{ label: __( 'Points' ), value: '2' },
			],
			design = parseInt( attributes.design );

		if ( design != 6 ) {
			scoreTypeOptions.push( { label: __( 'Stars' ), value: '3' } );
			scoreTypeOptions.push( { label: __( 'HTML/SVG Icons' ), value: '4' } );
			scoreTypeOptions.push( { label: __( 'Image' ), value: '5' } );
		}
		if ( design === 3 || design === 4 ) {
			bgImgOn = true;
			barsAniOn = false;
		}

		if ( design === 3 || design === 4 || design === 5 ) {
			critsOn = false;
		}
		let bgImagePlaceholder = __('Change Background Image');
		if ( design === 6 ) {
			bgImagePlaceholder = __('Change Main Image');
		}
		let positionClass = attributes.position
		if ( typeof positionClass === 'undefined' ) {
			positionClass = 'center';
		}

		let classes = 'wp-block-lets-review lets-review-block__wrap lr-cf';
			classes += ' lets-review--' + positionClass
			if (  positionClass === 'left' ||  positionClass === 'right' ) {
				classes += ' lets-review--side'
			}
			classes += ' lets-review-skin-' + skin;
			classes += ' lets-review-design-' + design;
			classes += ' lets-review-ani-' + attributes.aniType;
			classes += ' lets-review-score-type-' + scoreType;
			classes += scoreType > 2 ? ' lets-review-score-type__icon' : 'lets-review-score-type__bar';


		if ( ! attributes.fiThumb ) {
			classes += ' no-fi'
		}
		let styles = {}, titleStyles = {}, affStyles = {}, scoreOverlayStyles = {}

		if ( skin === 3 ) {
			styles = {
				backgroundColor: attributes.skinBG,
				color: attributes.skinText,
			}
			titleStyles = {
				color: attributes.skinTitles
			}
		}

		if ( scoreType > 2 ) {
			scoreOverlayStyles = {
				color: attributes.accent
			}
		}

		if ( design === 6 ) {
			affStyles = { background: attributes.accent }
		}



		let max = 100,
		step = 1,
		scoreTypeProp = 'outof100';
		if ( parseInt( attributes.scoreType ) === 2 ) {
			max = 10;
			step  = '.1'
			scoreTypeProp = 'outof10';
		} else if ( parseInt( attributes.scoreType ) > 2 ) {
			scoreTypeProp = 'outof5';
			step  = '.05'
			max = 5;
		}

		const alignmentTool = (
			<BlockControls>
				<BlockAlignmentToolbar
					value={ attributes.position }
					controls={ [ 'left', 'center', 'right' ] }
					onChange={ ( value ) => setAttributes( { position: value } ) }
				/>
			</BlockControls>
		);
		let fragmentConclusion = <Fragment>
			<div className="lets-review-block lets-review-block__conclusion__wrap lets-review-block__pad">
				<div className="conclusion__title lets-review-block__title" style={titleStyles}>
					<RichText
						multiline={false}
						value={ attributes.conclusionTitle }
						onChange={ ( value ) => setAttributes( { conclusionTitle: value } ) }
						placeholder={__('Title')}
					/>
				</div>
				<div className="lets-review-block__conclusion">
					<RichText
						multiline={false}
						value={ attributes.conclusion }
						onChange={ ( value ) => setAttributes( { conclusion: value } ) }
						placeholder={__('Conclusion...')}
					/>
				</div>
			</div>
		</Fragment>
		let fragmentProsCons = <Fragment>
			<div className="lets-review-block lets-review-block__proscons lets-review-block__pad">
				<div className="lets-review-block__pros">
					<div className="proscons__title lets-review-block__title" style={titleStyles}>
						<RichText
							multiline={false}
							value={ attributes.prosTitle }
							onChange={ ( value ) => setAttributes( { prosTitle: value } ) }
							placeholder={__('Pro Title')}
						/>
					</div>
					{ attributes.pros.map( ( block, index ) =>
				      	<div className="lets-review-block__pro lets-review-block__procon with--remover">
				      		<div className="lets-review-remover" onClick={() => blockRemover( 'pros', index )  }></div>
								<RichText
									multiline={false}
									value={ block.title }
									onChange={ blockEditor.bind( this, index, 'pros', 'title', '' ) }
									placeholder={__('Enter Pro')}
								/>
						</div>
					    )
					}
					<div className="lets-review-block lets-review-adder-wrap">
			      		<div className="lets-review-adder lets-review-font" onClick={() => blockAdder( 'pros')  }>{__('Add Pro')}</div>
					</div>
				</div>
				<div className="lets-review-block__cons">
					<div className="conscons__title lets-review-block__title" style={titleStyles}>
						<RichText
							multiline={false}
							value={ attributes.consTitle }
							onChange={ ( value ) => setAttributes( { consTitle: value } ) }
							placeholder={__('Con Title')}
						/>
					</div>
					{ attributes.cons.map( ( block, index ) =>
				      	<div className="lets-review-block__con lets-review-block__procon with--remover">
				      		<div className="lets-review-remover" onClick={() => blockRemover( 'cons', index )  }></div>
								<RichText
									multiline={false}
									value={ block.title }
									onChange={ blockEditor.bind( this, index, 'cons', 'title', '' ) }
									placeholder={__('Enter Con')}
								/>
						</div>
					    )
					}
					<div className="lets-review-block lets-review-adder-wrap">
			      		<div className="lets-review-adder lets-review-font" onClick={() => blockAdder( 'cons')  }>{__('Add Con')}</div>
					</div>
				</div>
			</div>
		</Fragment>;
		let fragmentImg = <Fragment>
		{ ( attributes.bgThumb && design === 6 ) ? <div className="lets-review-block lets-review-block__img">{ attributes.bgThumb ? <img src={attributes.bgThumb} /> : '' }</div> : '' }
		</Fragment>
		let fragmentBG = <Fragment>
		{ ( attributes.bgThumb && true === bgImgOn ) ? <div className="lets-review-block lets-review-block__bg" style={{ backgroundImage: 'url(' + attributes.bgThumb + ')'}}></div> : '' }
		</Fragment>

		let fragmentTitle = <Fragment>
			<div className="lets-review-block lets-review-block__main-title lr-vc lets-review-block__pad">
				<div className="lets-review-block__mask lr-vc with--remover">
						{ attributes.fiThumb ? <img src={attributes.fiThumb} /> : '' }
						{ attributes.fiThumb ? <div className="lets-review-remover" onClick={() => setAttributes( { fiID: '', fiThumb: '' })  }></div> : <MediaUploadCheck><MediaUpload
							onSelect={onImageSelect.bind( this, 'fi' )}
							type="image"
							value={attributes.fiID}
							render={({ open }) => (
								<button onClick={open} className="lets-review-upload"><svg width="24px" height="24px" viewBox="0 0 24 24"><path d="M19,2 L5,2 C3.3,2 2,3.3 2,5 L2,19 C2,20.7 3.3,22 5,22 L19,22 C20.7,22 22,20.7 22,19 L22,5 C22,3.3 20.7,2 19,2 Z M4,5 C4,4.4 4.4,4 5,4 L19,4 C19.6,4 20,4.4 20,5 L20,12.6 L16.7,9.3 C16.3,8.9 15.7,8.9 15.3,9.3 L4.7,19.9 C4.3,19.8 4,19.4 4,19 L4,5 Z M19,20 L7.4,20 L16,11.4 L20,15.4 L20,19 C20,19.6 19.6,20 19,20 Z M8.5,11 C9.9,11 11,9.9 11,8.5 C11,7.1 9.9,6 8.5,6 C7.1,6 6,7.1 6,8.5 C6,9.9 7.1,11 8.5,11 Z M8.5,8 C8.8,8 9,8.2 9,8.5 C9,8.8 8.8,9 8.5,9 C8.2,9 8,8.8 8,8.5 C8,8.2 8.2,8 8.5,8 Z" id="path-1"></path></svg></button>
							)}
						/></MediaUploadCheck> }
				</div>
				<div className="lets-review-block__title" style={titleStyles}>
					<RichText
						multiline={false}
						value={ attributes.title }
						onChange={ ( value ) => setAttributes( { title: value } ) }
						placeholder={__('Main Title')}
					/>
				</div>
			</div>
		</Fragment>;

		let fragmentGallery = attributes.gallery.length > 0 ? <Fragment>
			<div className="lets-review-block lets-review-block__gallery lets-review-block__pad">
				<div className="lets-review-block__title" style={titleStyles}>
					<RichText
						multiline={false}
						value={ attributes.galleryTitle }
						onChange={ ( value ) => setAttributes( { galleryTitle: value } ) }
						placeholder={__('Gallery Title')}
					/>
				</div>
				<div className="lets-review-block__images lr-all-c">
					{ attributes.gallery.map( ( block, index ) =>
						<div className="lets-review-block__image">
							<img src={block['thumb']} />
						</div>
					) }
				</div>
			</div>
		</Fragment> : '';
		function iconImgHTML( scoreType ) {
			let output = []
			for (var i = letsReviewBlockJS.args.icon_quantity - 1; i >= 0; i--) {
				if ( scoreType === 3 ) {
					output.push(<i class={ letsReviewBlockJS.args.stars }></i> )
				} else if ( scoreType === 4 ) {
					output.push(  <span dangerouslySetInnerHTML={{ __html: attributes.iconCode }}></span> )
				} else if ( scoreType === 5 ) {
					output.push(  <img src={attributes.imgIconThumb} /> )
				}
			}
			return output;
		}
		let fragmentCrits = true === critsOn ? <Fragment>
			<div className="lets-review-block lets-review-block__crits lets-review-crits-seen">
				{ attributes.crits.map( ( block, index ) =>

			      	<div className={critStyles( block['outof100'] )}>
			      		<div className="lets-review-remover" onClick={() => blockRemover( 'crits', index )  }></div>
						<div className="lets-review-block__crit__title" style={titleStyles}>
							<RichText
								multiline={false}
								value={ block.title }
								onChange={ blockEditor.bind( this, index, 'crits', 'title', '' ) }
								placeholder={__('Title')}
							/>
						</div>
						<div className="lets-review-block__crit__score">
							<TextControl
								value={ block[scoreTypeProp] }
								type="number"
								min={0}
								max={max}
								step={step}
								onChange={ blockEditor.bind( this, index, 'crits', scoreTypeProp, max ) }
							/>
						</div>
						<span className={scoreOverlayWrapClass} style={scoreOverlayStyles}>
						{  scoreType < 3 ? <span className="score-overlay" style={{width: block.outof100 + '%', background: attributes.accent }}></span> :
							<Fragment>
								{iconImgHTML( scoreType )}
								<span className="score-overlay" style={{width: ( block.outof100 - 100 ) * -1 + '%'}}></span>
							</Fragment>
						}
						</span>
						<span class="lr-tooltip">{ __( 'To set the score click the number and type') }</span>
					</div>
				    )
				}
				<div className="lets-review-block lets-review-adder-wrap">
		      		<div className="lets-review-adder lets-review-font" onClick={() => blockAdder( 'crits')  }>{__('Add Criteria')}</div>
				</div>
			</div>
		</Fragment> : '';

		let fragmentScore = attributes.showScore === true || attributes.showScore === 'true' ? <Fragment>
			<div className="lets-review-block lets-review-block__final-score lets-review-block__pad">
				<div className="score__wrap lr-all-c" style={{background: attributes.accent, color: attributes.skinFinalScore }}>
					<TextControl
						className="score"
						value={ Math.round( attributes.score[scoreTypeProp] * 10) / 10  }
						type="number"
						min={0}
						max={max}
						step={step}
						onChange={ scoreSetter.bind( this, 'score', max ) }
					/>
					<div className="score__title">
						<RichText
							multiline={true}
							value={ attributes.scoreTitle }
							onChange={ ( value ) => setAttributes( { scoreTitle: value } ) }
							placeholder={__('Subtitle')}
						/>
					</div>
				</div>
			</div>
		</Fragment> : '';


		const affAdderFragment = <div className="lets-review-block lets-review-adder-wrap lets-review-adder-aff">
		      		<div className="lets-review-adder lets-review-font" onClick={() => blockAdder( 'affBlocks' )  }>{__('Add Affiliate')}</div>
				</div>;

		let fragmentAffiliate = attributes.affBlocks.length > 0 ? <Fragment>
			<div className="lets-review-block lets-review-block__aff lets-review-block__pad">
				<div className="lets-review-block__title" style={titleStyles}>
					<RichText
						multiline={false}
						value={ attributes.affTitle }
						onChange={ ( value ) => setAttributes( { affTitle: value } ) }
						placeholder={__('Affiliate Title')}
					/>
				</div>
				<div className="aff-button-wrap">
				{ attributes.affBlocks.map( ( block, index ) =>
					<Fragment>
							<div className="aff-button lr-button with--remover" style={affStyles}>
								<div className="lets-review-remover" onClick={() => blockRemover( 'affBlocks', index )  }></div>
								<span className="button-title">
									<RichText
										multiline={false}
										value={ block.content }
										onChange={ blockEditor.bind( this, index, 'affBlocks', 'content', '' ) }
										placeholder={__('Affiliate')}
									/>
								</span>
								<div className="i-wrap" style={{background: attributes.accent }}>
									<i className="fa fa-shopping-cart"></i>
									<i className="fa fa-long-arrow-right"></i>
								</div>
							</div>
					</Fragment>
				    )
				}
				</div>
			</div>
			{affAdderFragment}
		</Fragment> : <Fragment>
			{affAdderFragment}
		</Fragment>;
		var galleryDefault = '';
		var galleryRemove = false
		var galleryButtonPlaceholder = __( 'Edit Gallery' );
		if ( attributes.gallery === undefined || attributes.gallery.length === 0 ) {
			galleryButtonPlaceholder = __( 'Create Gallery' );
		} else {
			galleryDefault = attributes.gallery.map(({ id }) => id)
			galleryRemove = true;
		}
		return ([
			<InspectorControls>
				<PanelBody title={ __( 'Block Options' ) }>
					<ToggleControl
						label={ __( 'Show Final Score' ) }
						checked={ attributes.showScore }
						onChange={ ( value ) => setAttributes( { showScore: value } ) }
					/>
					<ToggleControl
						label={ __( 'Show User Rating' ) }
						checked={ attributes.showUserRating }
						onChange={ ( value ) => setAttributes( { showUserRating: value } ) }
					/>
					<SelectControl
						label={__('Design')}
						value={ attributes.design }
						options={ [
							{ label: __( 'Minimalist' ), value: '1' },
							{ label: __( 'Minimalist B' ), value: '6' },
							{ label: __( 'Bold' ), value: '2' },
							{ label: __( 'Clean' ), value: '5' },
							{ label: __( 'Modern' ), value: '3' },
							{ label: __( 'Modern B' ), value: '4' },
						] }
						onChange={ onDesign.bind(this, attributes.scoreType) }
					/>
					<SelectControl
						label={__('Score Type')}
						value={ attributes.scoreType }
						options={ scoreTypeOptions }
						onChange={ onScoreType.bind( this ) }
					/>
					{ scoreType === 4 ? <TextControl
			        	label={ __( 'Icon HTML code' ) }
						onChange={ ( value ) => setAttributes( { iconCode: value } ) }
						value={attributes.iconCode}
					/> : '' }
					{ scoreType === 5 ? <div className="components-base-control inspector__upload"><MediaUploadCheck><MediaUpload
							onSelect={onImageSelect.bind( this, 'imgIcon' )}
							type="image"
							value={attributes.imgIconID}
							render={({ open }) => (
								<button className="components-button is-button is-default is-large" onClick={open}>{__('Change Image') }</button>
							)}
						/></MediaUploadCheck></div> : <SelectControl
						label="Skin"
						value={ attributes.skin }
						options={ [
							{ label: __( 'Light' ), value: '1' },
							{ label: __( 'Dark' ), value: '2' },
							{ label: __( 'Custom' ), value: '3' },
						] }
						onChange={ ( value ) => setAttributes( { skin: value } ) }
					/>}
					{ barsAniOn === true ?
						<SelectControl
							label={__('Bar Animations')}
							value={ attributes.aniType }
							options={ [
								{ label: __( 'Incremental' ), value: '1' },
								{ label: __( 'Fade In' ), value: '2' },
								{ label: __( 'None' ), value: '3' },
							] }
							onChange={ ( value ) => setAttributes( { aniType: value } ) }
						/> : ''
					}
					{ bgImgOn === true || design === 6 ? <div className="components-base-control inspector__upload"><MediaUploadCheck><MediaUpload
							onSelect={onImageSelect.bind( this, 'bg' )}
							type="image"
							value={attributes.bgID}
							render={({ open }) => (
								<button className="components-button is-button is-default is-large" onClick={open}>{bgImagePlaceholder}</button>
							)}
						/></MediaUploadCheck></div> : <SelectControl
						label="Skin"
						value={ attributes.skin }
						options={ [
							{ label: __( 'Light' ), value: '1' },
							{ label: __( 'Dark' ), value: '2' },
							{ label: __( 'Custom' ), value: '3' },
						] }
						onChange={ ( value ) => setAttributes( { skin: value } ) }
					/>}
				</PanelBody>
				<PanelBody title={ __( 'Schema' ) }>
					<SelectControl
						label={__('Schema Type')}
						value={ attributes.itemReviewed }
						options={ [
							{ label: __( 'Organization' ), value: 'Organization' },
							{ label: __( 'Product' ), value: 'Product' },
							{ label: __( 'Episode' ), value: 'Episode' },
							{ label: __( 'Movie' ), value: 'Movie' },
							{ label: __( 'Game' ), value: 'Game' },
						] }
						onChange={ ( value ) => setAttributes( { itemReviewed: value } ) }
					/>
					{ 'Product' === attributes.itemReviewed ? <TextControl
			        	label={ __( 'Description' ) }
						onChange={ ( value ) => setAttributes( { schemaDescription: value } ) }
						value={attributes.schemaDescription}
					/> : '' }
					{ 'Product' === attributes.itemReviewed ? <TextControl
			        	label={ __( 'Brand' ) }
						onChange={ ( value ) => setAttributes( { schemaBrand: value } ) }
						value={attributes.schemaBrand}
					/> : '' }
					{ 'Product' === attributes.itemReviewed ? <TextControl
			        	label={ __( 'SKU' ) }
						onChange={ ( value ) => setAttributes( { schemaSku: value } ) }
						value={attributes.schemaSku}
					/> : '' }
					{ 'Product' === attributes.itemReviewed ? <TextControl
			        	label={ __( 'MPN' ) }
						onChange={ ( value ) => setAttributes( { schemaMpn: value } ) }
						value={attributes.schemaMpn}
					/> : '' }
					{ 'Movie' === attributes.itemReviewed ? <TextControl
			        	label={ __( 'Director' ) }
						onChange={ ( value ) => setAttributes( { schemaDirector: value } ) }
						value={attributes.schemaDirector}
					/> : '' }
					{ 'Movie' === attributes.itemReviewed ? <TextControl
			        	label={ __( 'Date Created' ) }
						onChange={ ( value ) => setAttributes( { schemaDateCreated: value } ) }
						value={attributes.schemaDateCreated}
					/> : '' }
				</PanelBody>
				<PanelBody title={ __( 'Gallery' ) }>
				<span className="lr-gallery-wrapper">
					<MediaUploadCheck>
						<MediaUpload
							onSelect={onGallerySelect.bind( this, 'gallery' )}
							type="image"
							gallery={true}
							multiple={true}
							addToGallery={true}
							value={ attributes.gallery.length > 0 ? attributes.gallery.map( ( { id } ) => id ) : ''}
							render={({ open }) => (
								<Button onClick={ open } className="is-button is-default">
									{ galleryButtonPlaceholder }
								</Button>
							)}
						/>
					</MediaUploadCheck>
					{galleryRemove === true ?
						<Button onClick={ () => setAttributes( { gallery: '' } ) } className="is-button is-default">
						{ __('Remove Gallery') }
					</Button> : ''
					}
					</span>

				</PanelBody>
				<PanelColorSettings
					title={ __( 'Color Settings' ) }
					colorSettings={ [
						{
							value: attributes.accent,
                			onChange: ( value ) => setAttributes( { accent: value } ),
							label: __( 'Accent Color' ),
						},
						{
							value: attributes.skinFinalScore,
							onChange: ( value ) => setAttributes( { skinFinalScore: value } ),
							label: __( 'Final Score Color' ),
						},
					] }
				>
				</PanelColorSettings>
				{ parseInt( attributes.skin ) === 3 && (
					<PanelColorSettings
						title={ __( 'Color Settings' ) }
						colorSettings={ [
							{
								value: attributes.skinBG,
                    			onChange: ( value ) => setAttributes( { skinBG: value } ),
								label: __( 'Background Color' ),
							},
							{
								value: attributes.skinTitles,
								onChange: ( value ) => setAttributes( { skinTitles: value } ),
								label: __( 'Titles Color' ),
							},
							{
								value: attributes.skinText,
								onChange: ( value ) => setAttributes( { skinText: value } ),
								label: __( 'Body Color' ),
							},
						] }
					>
					</PanelColorSettings>
				) }
			</InspectorControls>,
			<Fragment>
				{ alignmentTool }
				<div className={ classes } style={styles}>
					{ fragmentBG }
					{ fragmentImg }
					{ fragmentTitle }
					{ fragmentConclusion }
					{ fragmentCrits }
					{ fragmentProsCons }
					{ fragmentScore }
					{ fragmentGallery }
					{ fragmentAffiliate }
				</div>
			</Fragment>
		])
	}

}

registerBlockType( 'lets-review/block-review', {
	title: __( "Let's Review" ),
	description: __( 'A flexible and powerful review block.' ),
	icon: iconEl,
	category: 'lets-review-blocks',
	keywords: [
		__( 'review' ),
		__( 'rating' ),
		'lets review',
		"Let's Review",
		'lets-review',
	],
	attributes: {
		skin: {
			type: 'string',
			default: '1',
		},
		design: {
			type: 'string',
			default: '1',
		},
		aniType: {
			type: 'string',
			default: '1',
		},
		scoreType: {
			type: 'string',
			default: '1',
		},
		position: {
			type: 'string',
			default: 'center',
		},
		fiID: {
			type: 'integer',
		},
		fiThumb: {
			type: 'string',
		},
		bgID: {
			type: 'integer',
		},
		bgThumb: {
			type: 'string',
		},
		imgIconID: {
			type: 'integer',
		},
		imgIconThumb: {
			type: 'string',
		},
		showScore: {
			type: 'boolean',
			default: 'true',
		},
		showUserRating: {
			type: 'boolean',
			default: 'false',
		},
		score: {
			type: 'object',
			default: {
				outof5: '0',
				outof10: '0',
				outof100: '0',
			},
		},
		scoreTitle: {
			type: 'string',
			default: '',
		},
		affTitle: {
			type: 'string',
		},
		crits: {
			type: 'array',
			default: [{
				outof5: '0',
				outof10: '0',
				outof100: '0',
				title: '',
				rating: 'false',
			}]
		},
		pros: {
			type: 'array',
			default: [{
				title: '',
			}]
		},
		prosTitle: {
			type: 'string',
			default: '',
		},
		cons: {
			type: 'array',
			default: [{
				title: '',
			}]
		},
		consTitle: {
			type: 'string',
			default: '',
		},
		iconCode: {
            type: 'string',
            default: '',
        },
		conclusionTitle: {
			type: 'string',
			default: '',
		},
		conclusion: {
			type: 'string',
			default: '',
		},
		title: {
			type: 'string',
			default: '',
		},
		affBlocks: {
			type: 'array',
			default: []
		},
		galleryTitle: {
			type: 'string',
			default: '',
		},
		gallery: {
			type: 'array',
			default: '',
		},
		skinBG: {
			type: 'string',
			default: '#111',
		},
		skinText: {
			type: 'string',
			default: '#fff',
		},
		skinTitles: {
			type: 'string',
			default: '#ead125',
		},
		skinFinalScore: {
			type: 'string',
			default: '#fff',
		},
		accent: {
			type: 'string',
			default: '#f8d92f',
		},
		itemReviewed: {
			type: 'string',
			default: 'Organization',
		},
		schemaDirector: {
			type: 'string',
			default: '',
		},
		schemaMpn: {
			type: 'string',
			default: '',
		},
		schemaSku: {
			type: 'string',
			default: '',
		},
		schemaBrand: {
			type: 'string',
			default: '',
		},
		schemaDescription: {
			type: 'string',
			default: '',
		},
		schemaDateCreated: {
			type: 'date',
			default: '',
		},
		uid: {
			type: 'integer',
			default: 123,
		}
	},

	getEditWrapperProps( attributes ) {
		let { position } = attributes;
		if ( typeof position === 'undefined' ) {
			position = 'center';
		}
		if ( 'left' === position || 'center' === position || 'right' === position ) {
			return { 'data-align': position };
		}
	},

	edit: letsReviewBox,

	save: function( props ) {
		return null
	},
} );
