/**
 * Styles
 */
import './style.scss';


/**
 * Internal dependencies
 */
import isCoreBlockWithExt from '../../utils/is-core-block-with-ext';
import dynamicStylesBYkey from '../../utils/dynamic-styles-by-key';
import ComponentResponsiveWrapper from '../../components/responsive-wrapper';

const {
	canvasBreakpoints,
} = window;

/**
 * WordPress dependencies
 */
const { __ } = wp.i18n;

const {
	addFilter,
} = wp.hooks;

const {
	Component,
	Fragment,
} = wp.element;

const {
	createHigherOrderComponent,
} = wp.compose;

const {
	BaseControl,
	PanelBody,
	RangeControl,
	SelectControl,
	DropZone,
	Button,
} = wp.components;

const {
	hasBlockSupport,
} = wp.blocks;

const {
	InspectorControls,
	MediaPlaceholder,
	MediaUpload,
	mediaUpload,
} = wp.blockEditor;


/**
 * Extend block attributes with background image.
 *
 * @param {Object} blockSettings Original block settings.
 * @param {String} name Original block name.
 *
 * @return {Object} Filtered block settings.
 */
function addAttribute( blockSettings, name ) {
	let supports = hasBlockSupport( name, 'canvasBackgroundImage', false );

	if ( isCoreBlockWithExt( name ) ) {
		blockSettings.supports = {
			...blockSettings.supports,
			canvasBackgroundImage: ['core/group'].includes(name) ? true : false,
		};
		supports = ['core/group'].includes(name) ? true : false;
	}

	if ( supports ) {
		if ( ! blockSettings.attributes ) {
			blockSettings.attributes = {};
		}

		// Responsive attributes.
		Object.keys( canvasBreakpoints ).forEach( ( breakpoint ) => {
			let suffix = '';

			if ( breakpoint && 'desktop' !== breakpoint ) {
				suffix = `_${ breakpoint }`;
			}

			// Background Image.
			if ( ! blockSettings.attributes[ `backgroundImage${ suffix }` ] ) {
				blockSettings.attributes[ `backgroundImage${ suffix }` ] = {
					type: 'object',
				};
			}

			// Background Position.
			if ( ! blockSettings.attributes[ `backgroundPosition${ suffix }` ] ) {
				blockSettings.attributes[ `backgroundPosition${ suffix }` ] = {
					type: 'string',
				};
			}

			// Background Position X Unit.
			if ( ! blockSettings.attributes[ `backgroundPositionXUnit${ suffix }` ] ) {
				blockSettings.attributes[ `backgroundPositionXUnit${ suffix }` ] = {
					type: 'string',
				};
			}

			// Background Position X Val.
			if ( ! blockSettings.attributes[ `backgroundPositionXVal${ suffix }` ] ) {
				blockSettings.attributes[ `backgroundPositionXVal${ suffix }` ] = {
					type: 'number',
				};
			}

			// Background Position Y Unit.
			if ( ! blockSettings.attributes[ `backgroundPositionYUnit${ suffix }` ] ) {
				blockSettings.attributes[ `backgroundPositionYUnit${ suffix }` ] = {
					type: 'string',
				};
			}

			// Background Position Y Val.
			if ( ! blockSettings.attributes[ `backgroundPositionYVal${ suffix }` ] ) {
				blockSettings.attributes[ `backgroundPositionYVal${ suffix }` ] = {
					type: 'number',
				};
			}

			// Background Attachment.
			if ( ! blockSettings.attributes[ `backgroundAttachment${ suffix }` ] ) {
				blockSettings.attributes[ `backgroundAttachment${ suffix }` ] = {
					type: 'string',
				};
			}

			// Background Repeat.
			if ( ! blockSettings.attributes[ `backgroundRepeat${ suffix }` ] ) {
				blockSettings.attributes[ `backgroundRepeat${ suffix }` ] = {
					type: 'string',
				};
			}

			// Background Size Unit.
			if ( ! blockSettings.attributes[ `backgroundSizeUnit${ suffix }` ] ) {
				blockSettings.attributes[ `backgroundSizeUnit${ suffix }` ] = {
					type: 'string',
				};
			}

			// Background Size Val.
			if ( ! blockSettings.attributes[ `backgroundSizeVal${ suffix }` ] ) {
				blockSettings.attributes[ `backgroundSizeVal${ suffix }` ] = {
					type: 'number',
				};
			}
		} );
	}

	return blockSettings;
}

/**
 * Override the default edit UI to include a new block inspector control for
 * assigning the custom background image if needed.
 *
 * @param {function|Component} BlockEdit Original component.
 *
 * @return {string} Wrapped component.
 */
const withInspectorControl = createHigherOrderComponent( ( OriginalComponent ) => {
	return class CanvasBackgroundImageWrapper extends Component {
		constructor() {
			super( ...arguments );

			this.getCurrentBackgroundImageStyles = this.getCurrentBackgroundImageStyles.bind( this );
			this.getCurrentValue = this.getCurrentValue.bind( this );
		}

		/**
		 * Get current background image for preview purposes.
		 *
		 * @returns {String} background image.
		 */
		getCurrentBackgroundImageStyles() {
			const {
				attributes,
			} = this.props;

			const {
				canvasClassName,
			} = attributes;

			let customStyles = '';

			if ( canvasClassName ) {
				Object.keys( canvasBreakpoints ).forEach( ( name ) => {
					let suffix = '';
					let backgroundImageStyles = '';

					if ( name && name !== 'desktop' ) {
						suffix = '_' + name;
					}


					if ( typeof attributes[ 'backgroundImage' + suffix ] !== 'undefined' && attributes[ 'backgroundImage' + suffix ].id ) {
						backgroundImageStyles += `background-image: url("${ attributes[ 'backgroundImage' + suffix ].url }"); `;
					}

					if ( typeof attributes[ 'backgroundImage'] !== 'undefined' && attributes[ 'backgroundImage'].id ) {
						if ( typeof attributes[ 'backgroundPosition' + suffix ] !== 'undefined' ) {
							if ( 'custom' === attributes[ 'backgroundPosition' + suffix ] ) {
								let unitX = typeof attributes[ 'backgroundPositionXUnit' + suffix ] !== 'undefined' ? attributes[ 'backgroundPositionXUnit' + suffix ] : 'px';
								let valX  = typeof attributes[ 'backgroundPositionXVal' + suffix ] !== 'undefined' ? attributes[ 'backgroundPositionXVal' + suffix ] : '0';
								let unitY = typeof attributes[ 'backgroundPositionYUnit' + suffix ] !== 'undefined' ? attributes[ 'backgroundPositionYUnit' + suffix ] : 'px';
								let valY  = typeof attributes[ 'backgroundPositionYVal' + suffix ] !== 'undefined' ? attributes[ 'backgroundPositionYVal' + suffix ] : '0';

								backgroundImageStyles += `background-position: ${ valX }${ unitX } ${ valY }${ unitY }; `;
							} else {
								backgroundImageStyles += `background-position: ${ attributes[ 'backgroundPosition' + suffix ] }; `;
							}
						}

						if ( typeof attributes[ 'backgroundAttachment' + suffix ] !== 'undefined' ) {
							backgroundImageStyles += `background-attachment: ${ attributes[ 'backgroundAttachment' + suffix ] }; `;
						}

						if ( typeof attributes[ 'backgroundRepeat' + suffix ] !== 'undefined' ) {
							backgroundImageStyles += `background-repeat: ${ attributes[ 'backgroundRepeat' + suffix ] }; `;
						}

						if ( typeof attributes[ 'backgroundSize' + suffix ] !== 'undefined' ) {
							backgroundImageStyles += `background-size: ${ attributes[ 'backgroundSize' + suffix ] }; `;

							if ( 'custom' === attributes[ 'backgroundSize' + suffix ] ) {
								if ( typeof attributes[ 'backgroundSizeVal' + suffix ] !== 'undefined' ) {
									let unit = typeof attributes[ 'backgroundSizeUnit' + suffix ] !== 'undefined' ? attributes[ 'backgroundSizeUnit' + suffix ] : '%';

									backgroundImageStyles += `background-size: ${ attributes[ 'backgroundSizeVal' + suffix ] }${ unit } auto; `;
								}
							} else {
								backgroundImageStyles += `background-size: ${ attributes[ 'backgroundSize' + suffix ] }; `;
							}
						}
					}

					if ( backgroundImageStyles ) {
						backgroundImageStyles = `.${ canvasClassName } { ${ backgroundImageStyles } }`;

						if ( suffix ) {
							backgroundImageStyles = `@media (max-width: ${ canvasBreakpoints[ name ].width }px) { ${ backgroundImageStyles } } `;
						}

						customStyles += backgroundImageStyles;
					}
				} );
			}

			return customStyles;
		}

		/**
		 * Get current value.
		 *
		 * @param {String} name - name.
		 * @param {String} suffix - suffix.
		 *
		 * @return {Int}
		 */
		getCurrentValue( name, suffix = '' ) {
			const {
				attributes,
			} = this.props;

			return attributes[ `${ name }${ suffix }` ];
		}

		render() {
			if ( ! hasBlockSupport( this.props.name, 'canvasBackgroundImage', false ) ) {
				return <OriginalComponent { ...this.props } />;
			}

			const {
				attributes,
				setAttributes,
			} = this.props;

			const {
				canvasClassName,
			} = attributes;

			dynamicStylesBYkey( 'background-image', canvasClassName, this.getCurrentBackgroundImageStyles() );

			return (
				<Fragment>
					<OriginalComponent
						{ ...this.props }
						{ ...this.state }
						setState={ this.setState }
					/>
					<InspectorControls>
						<PanelBody
							title={ __( 'Background Image' ) }
							initialOpen={ false }
						>
							<ComponentResponsiveWrapper>
								{ ( { responsiveSuffix, ComponentResponsiveDropdown } ) => {

									var controlName = 'backgroundImage' + responsiveSuffix;

									// Get values of control.
									var id  = controlName in attributes ? attributes[controlName].id : 0;
									var url = controlName in attributes ? attributes[controlName].url : '';

									return (
										<Fragment>
											<h2>
												{ __( 'Image' ) }
												<ComponentResponsiveDropdown />
											</h2>

											<Fragment>
												<BaseControl
												>
													{ ! id ? (
														<MediaPlaceholder
															icon="format-image"
															labels={ {
																title: __( 'Image' ),
																name: __( 'image' ),
															} }
															onSelect={ ( image ) => {
																setAttributes( { [ controlName ] : {
																	id: image.id,
																	url: image.url,
																} } );
															} }
															accept="image/*"
															allowedTypes={ [ 'image' ] }
															disableMaxUploadErrorMessages
															onError={ ( e ) => {
																console.log( e );
															} }
														/>
													) : '' }
													{ url ? (
														<Fragment>
															<DropZone
																onFilesDrop={ ( files ) => {
																	mediaUpload( {
																		allowedTypes: [ 'image' ],
																		filesList: files,
																		onFileChange: ( image ) => {
																			setAttributes( { [ controlName ]: {
																				id: image.id,
																				url: image.url,
																			} } );
																		},
																		onError( e ) {
																			console.log( e );
																		},
																	} );
																} }
															/>
															{ url ? (
																<img src={ url } />
															) : '' }
															<div>
																<Button
																	isDefault={ true }
																	onClick={ () => {
																		setAttributes( { [ controlName ]: {
																			id: 0,
																			url: '',
																		} } );
																	} }
																>
																	{ __( 'Remove Image' ) }
																</Button>
															</div>
														</Fragment>
													) : '' }
												</BaseControl>
											</Fragment>
										</Fragment>
									);
								} }
							</ComponentResponsiveWrapper>


							{/* Additional Controls */}
							{ 'backgroundImage' in attributes && typeof attributes['backgroundImage'] === 'object' && attributes['backgroundImage'].id ? (
								<div>
									<ComponentResponsiveWrapper>
										{ ( { responsiveSuffix, ComponentResponsiveDropdown } ) => {

											var controlName = 'backgroundPosition' + responsiveSuffix;

											return (
												<Fragment>
													<h2>
														{ __( 'Position' ) }
														<ComponentResponsiveDropdown />
													</h2>

													<SelectControl
														label={ false }
														help={ false }
														multiple={ false }
														value={ controlName in attributes ? attributes[controlName] : '' }
														options={ [
															{ label: 'Default', value: '' },
															{ label: 'Center Center', value: 'center center' },
															{ label: 'Center Left', value: 'center left' },
															{ label: 'Center Right', value: 'center right' },
															{ label: 'Top Center', value: 'top center' },
															{ label: 'Top Left', value: 'center left' },
															{ label: 'Top Right', value: 'top right' },
															{ label: 'Bottom Center', value: 'bottom center' },
															{ label: 'Bottom Left', value: 'bottom left' },
															{ label: 'Bottom Left', value: 'bottom right' },
															{ label: 'Custom', value: 'custom' },
														] }
														onChange={ ( val ) => {
															setAttributes( { [ controlName ]: val });
														} }
													/>
												</Fragment>
											);
										} }
									</ComponentResponsiveWrapper>

									<ComponentResponsiveWrapper>
										{ ( { responsiveSuffix, ComponentResponsiveDropdown } ) => {

											var controlName     = 'backgroundPosition' + responsiveSuffix;
											var unitControlName = 'backgroundPositionXUnit' + responsiveSuffix;
											var valControlName  = 'backgroundPositionXVal' + responsiveSuffix;

											var units = [ 'px', 'em', '%' ];
											if ( 'custom' === attributes[controlName] ) {
												return (
													<Fragment>
														<h2 class="cnvs-component-background-image-units">
															{ __( 'X Position' ) }
															<ComponentResponsiveDropdown />

															<div className="cnvs-component-background-image-units-controls">
																{ units.map( ( unit ) => {
																	var unitVal = unitControlName in attributes && attributes[unitControlName] ? attributes[unitControlName] : 'px';
																	return (
																		<Button
																			isPrimary={ ( unitVal === unit ) ? true : false }
																			onClick={ () => {
																				setAttributes( { [ unitControlName ]: unit });
																			} }
																		>
																			{ unit }
																		</Button>
																	);
																} ) }
															</div>
														</h2>

														<RangeControl
															label={ false }
															help={ false }
															min={ -2000 }
															max={ 2000 }
															step={ 1 }
															value={ valControlName in attributes ? attributes[valControlName] : 0 }
															onChange={ ( val ) => {
																setAttributes( { [ valControlName ]: val });
															} }
														/>
													</Fragment>
												);
											}
										} }
									</ComponentResponsiveWrapper>

									<ComponentResponsiveWrapper>
										{ ( { responsiveSuffix, ComponentResponsiveDropdown } ) => {

											var controlName     = 'backgroundPosition' + responsiveSuffix;
											var unitControlName = 'backgroundPositionYUnit' + responsiveSuffix;
											var valControlName  = 'backgroundPositionYVal' + responsiveSuffix;

											var units = [ 'px', 'em', '%' ];

											if ( 'custom' === attributes[controlName] ) {
												return (
													<Fragment>
														<h2 class="cnvs-component-background-image-units">
															{ __( 'Y Position' ) }
															<ComponentResponsiveDropdown />

															<div className="cnvs-component-background-image-units-controls">
																{ units.map( ( unit ) => {
																	var unitVal = unitControlName in attributes && attributes[unitControlName] ? attributes[unitControlName] : 'px';
																	return (
																		<Button
																			isPrimary={ ( unitVal === unit ) ? true : false }
																			onClick={ () => {
																				setAttributes( { [ unitControlName ]: unit });
																			} }
																		>
																			{ unit }
																		</Button>
																	);
																} ) }
															</div>
														</h2>

														<RangeControl
															label={ false }
															help={ false }
															min={ -2000 }
															max={ 2000 }
															step={ 1 }
															value={ valControlName in attributes ? attributes[valControlName] : 0 }
															onChange={ ( val ) => {
																setAttributes( { [ valControlName ]: val });
															} }
														/>
													</Fragment>
												);
											}
										} }
									</ComponentResponsiveWrapper>

									<ComponentResponsiveWrapper>
										{ ( { responsiveSuffix, ComponentResponsiveDropdown } ) => {

											var controlName = 'backgroundAttachment' + responsiveSuffix;

											return (
												<Fragment>
													<h2>
														{ __( 'Attachment' ) }
														<ComponentResponsiveDropdown />
													</h2>

													<SelectControl
														label={ false }
														help={ false }
														multiple={ false }
														value={ controlName in attributes ? attributes[controlName] : '' }
														options={ [
															{ label: 'Default', value: '' },
															{ label: 'Scroll', value: 'scroll' },
															{ label: 'Fixed', value: 'fixed' },
														] }
														onChange={ ( val ) => {
															setAttributes( { [ controlName ]: val });
														} }
													/>
												</Fragment>
											);
										} }
									</ComponentResponsiveWrapper>

									<ComponentResponsiveWrapper>
										{ ( { responsiveSuffix, ComponentResponsiveDropdown } ) => {

											var controlName = 'backgroundRepeat' + responsiveSuffix;

											return (
												<Fragment>
													<h2>
														{ __( 'Repeat' ) }
														<ComponentResponsiveDropdown />
													</h2>

													<SelectControl
														label={ false }
														help={ false }
														multiple={ false }
														value={ controlName in attributes ? attributes[controlName] : '' }
														options={ [
															{ label: 'Default', value: '' },
															{ label: 'No-repeat', value: 'no-repeat' },
															{ label: 'Repeat', value: 'repeat' },
															{ label: 'Repeat-x', value: 'repeat-x' },
															{ label: 'Repeat-y', value: 'repeat-y' },
														] }
														onChange={ ( val ) => {
															setAttributes( { [ controlName ]: val });
														} }
													/>
												</Fragment>
											);
										} }
									</ComponentResponsiveWrapper>

									<ComponentResponsiveWrapper>
										{ ( { responsiveSuffix, ComponentResponsiveDropdown } ) => {

											var controlName = 'backgroundSize' + responsiveSuffix;

											return (
												<Fragment>
													<h2>
														{ __( 'Size' ) }
														<ComponentResponsiveDropdown />
													</h2>

													<SelectControl
														label={ false }
														help={ false }
														multiple={ false }
														value={ controlName in attributes ? attributes[controlName] : '' }
														options={ [
															{ label: 'Default', value: '' },
															{ label: 'Auto', value: 'auto' },
															{ label: 'Cover', value: 'cover' },
															{ label: 'Contain', value: 'contain' },
															{ label: 'Custom', value: 'custom' },
														] }
														onChange={ ( val ) => {
															setAttributes( { [ controlName ]: val });
														} }
													/>
												</Fragment>
											);
										} }
									</ComponentResponsiveWrapper>

									<ComponentResponsiveWrapper>
										{ ( { responsiveSuffix, ComponentResponsiveDropdown } ) => {

											var controlName     = 'backgroundSize' + responsiveSuffix;
											var unitControlName = 'backgroundSizeUnit' + responsiveSuffix;
											var valControlName  = 'backgroundSizeVal' + responsiveSuffix;

											var units = [ 'px', 'em', '%' ];

											if ( 'custom' === attributes[controlName] ) {
												return (
													<Fragment>
														<h2 class="cnvs-component-background-image-units">
															{ __( 'Width' ) }
															<ComponentResponsiveDropdown />

															<div className="cnvs-component-background-image-units-controls">
																{ units.map( ( unit ) => {
																	var unitVal = unitControlName in attributes && attributes[unitControlName] ? attributes[unitControlName] : '%';
																	return (
																		<Button
																			isPrimary={ ( unitVal === unit ) ? true : false }
																			onClick={ () => {
																				setAttributes( { [ unitControlName ]: unit });
																			} }
																		>
																			{ unit }
																		</Button>
																	);
																} ) }
															</div>
														</h2>

														<RangeControl
															label={ false }
															help={ false }
															min={ 0 }
															max={ 2000 }
															step={ 1 }
															value={ valControlName in attributes ? attributes[valControlName] : '' }
															onChange={ ( val ) => {
																setAttributes( { [ valControlName ]: val });
															} }
														/>
													</Fragment>
												);
											}
										} }
									</ComponentResponsiveWrapper>
								</div>
							) : '' }
						</PanelBody>
					</InspectorControls>
				</Fragment>
			);
		}
	};
}, 'withInspectorControl' );

// Init filters.
addFilter( 'blocks.registerBlockType', 'canvas/background-image/additional-attributes', addAttribute );
addFilter( 'editor.BlockEdit', 'canvas/background-image/additional-attributes', withInspectorControl );