/**
 * BLOCK: Visitor Ratings
 */

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,
	DateTimePicker,
	Button,
	TextControl,
	ColorPicker,
	PanelBody,
	ServerSideRender,
} = 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 letsReviewVisitorRating 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;
		let barsAniOn = '',
			accentOn = true,
			scoreType = parseInt( attributes.scoreType ),
			design = parseInt( attributes.design );
		let scoreTypeOptions = [
			{ label: __( 'Percentage' ), value: '1' },
			{ label: __( 'Points' ), value: '2' },
		];
		if ( design === 6 ) {
			accentOn = false;
		} else {
			scoreTypeOptions.push( { label: __( 'Stars' ), value: '3' } );
			scoreTypeOptions.push( { label: __( 'Custom Icons' ), value: '4' } );
			scoreTypeOptions.push( { label: __( 'Custom Image' ), value: '5' } );
		}
		let colorSettingsOptions = [
			{
				value: attributes.accent,
    			onChange: ( value ) => setAttributes( { accent: value } ),
				label: __( 'Accent Color' ),
			},
		];
		if ( parseInt( attributes.skin ) === 3 && design !== 6 ) {
			colorSettingsOptions.push( {
					value: attributes.skinBG,
    			onChange: ( value ) => setAttributes( { skinBG: value } ),
				label: __( 'Background Color' ),
			} );
			colorSettingsOptions.push( {
					value: attributes.skinText,
					onChange: ( value ) => setAttributes( { skinText: value } ),
					label: __( 'Text Color' ),
			} );

		}

		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
			})
		}
		return ([
			<InspectorControls>
				<PanelBody title={ __( 'Block Options' ) }>
					<SelectControl
						label={__('Design')}
						value={ attributes.design }
						options={ [
							{ label: __( 'Minimalist' ), value: '1' },
							{ label: __( 'Minimalist B' ), value: '6' },
							{ label: __( 'Bold' ), value: '2' },
						] }
						onChange={ function( value ) {
							if ( 6 === parseInt(value) && parseInt( attributes.scoreType ) > 2 ) {
								setAttributes( { design: value, scoreType: '1'  } )
							} else {
								setAttributes( { design: value } )
							}
						} }
					/>
					<SelectControl
						label={__('Score Type')}
						value={ attributes.scoreType }
						options={ scoreTypeOptions }
						onChange={ ( value ) => setAttributes( { scoreType: value } ) }
					/>
					{ scoreType === 4 ? <TextControl
			        	label={ __( 'Icon HTML code', 'lets-review' ) }
						onChange={ ( value ) => setAttributes( { iconCode: value } ) }
						value={attributes.iconCode}
					/> : '' }
					{ 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 } ) }
						/> : ''
					}
				</PanelBody>
				{ design === 6 ? '' : <SelectControl
					label="Skin"
					value={ attributes.skin }
					options={ [
						{ label: __( 'Light' ), value: '1' },
						{ label: __( 'Dark' ), value: '2' },
						{ label: __( 'Custom' ), value: '3' },
					] }
					onChange={ ( value ) => setAttributes( { skin: value } ) }
				/>}
				<TextControl
		        	label={ __( 'Title', 'lets-review' ) }
					onChange={ ( value ) => setAttributes( { title: value } ) }
					value={attributes.title}
				/>
				{ attributes.title === '' ? '' : <ToggleControl
						label={ __( 'Hide Title Box' ) }
						checked={ attributes.hideTitleBox }
						onChange={ ( value ) => setAttributes( { hideTitleBox: value } ) }
					/>
				}
				<PanelBody title={ __( 'Schema' ) }>
					<SelectControl
						label={__('Schema Type')}
						value={ attributes.itemReviewed }
						options={ [
							{ label: __( 'Product' ), value: 'Product' },
							{ label: __( 'Episode' ), value: 'Episode' },
							{ label: __( 'Movie' ), value: 'Movie' },
							{ label: __( 'Game' ), value: 'Game' },
							{ label: __( 'Organization' ), value: 'Organization' },
						] }
						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}
					/> : '' }
					{ 'Product' === attributes.itemReviewed || 'Movie' === attributes.itemReviewed ? <div className="components-base-control inspector__upload"><MediaUploadCheck><MediaUpload
							onSelect={onImageSelect.bind( this, 'fi' )}
							type="image"
							value={attributes.fiID}
							render={({ open }) => (
								<button className="components-button is-button is-default is-large" onClick={open}>{ __('Set Schema Image')}</button>
							)}
						/></MediaUploadCheck>{ attributes.fiThumb ? <img src={attributes.fiThumb} /> : '' }</div> : ''}
				</PanelBody>
				<PanelColorSettings
					title={ __( 'Color Settings' ) }
					colorSettings={ colorSettingsOptions }
				>
				</PanelColorSettings>
			</InspectorControls>,
			el(ServerSideRender, {
                block: "lets-review/block-visitor-ratings",
                attributes: attributes
            })
		])
	}

}

registerBlockType( 'lets-review/block-visitor-ratings', {
	title: __( "Visitor Rating" ),
	description: __( 'A block to let visitors leave their own rating.' ),
	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',
		},
		title: {
            type: 'string',
            default: '',
        },
        hideTitleBox: {
			type: 'boolean',
			default: 'false',
		},
        iconCode: {
            type: 'string',
            default: '',
        },
		scoreType: {
			type: 'string',
			default: '1',
		},
		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: 'string',
			default: '',
		},
		accent: {
			type: 'string',
			default: '#f8d92f',
		},
		skinBG: {
			type: 'string',
			default: '#111',
		},
		fiID: {
			type: 'integer',
		},
		fiThumb: {
			type: 'string',
		},
		skinText: {
			type: 'string',
			default: '#fff',
		},
		uid: {
			type: 'integer',
			default: 123,
		}
	},
	edit: letsReviewVisitorRating,
	save: function( props ) {
		return null
	},
} );
