import { InspectorControls } from '@wordpress/block-editor';
import { Fragment } from '@wordpress/element';
import { PanelBody, ToggleControl } from '@wordpress/components';
const { createHigherOrderComponent } = wp.compose;
const { addFilter } = wp.hooks;
import classnames from 'classnames';


/**
 * Add custom attribute for responsive visibility.
 * @param settings Settings Object
 * @param name
 * @returns {Object} Modified Settings Object
 */
function nexter_fse_addRespAttr( settings, name ) {
	if ( typeof settings.attributes !== 'undefined' ) {
		settings.attributes = Object.assign( settings.attributes, {
			hideOnDesktop: {
				type: 'boolean',
				default: false,
			},
			hideOnTablet: {
				type: 'boolean',
				default: false,
			},
			hideOnMobile: {
				type: 'boolean',
				default: false,
			},
		} );
	}
	return settings;
}

const nexter_fse_addRespCont = wp.compose.createHigherOrderComponent(
	( BlockEdit ) => {
		return ( props ) => {
			const { attributes, setAttributes, name } = props;
			return (
				<Fragment>
					<BlockEdit { ...props } />
					<InspectorControls>
						<PanelBody
							title={ 'Nexter Settings' }
							initialOpen={ false }
						>
							<ToggleControl
								label={ wp.i18n.__(
									'Hide on desktop',
									'nexter-fse'
								) }
								checked={ !! attributes.hideOnDesktop }
								onChange={ ( newval ) =>
									setAttributes( {
										hideOnDesktop:
											! attributes.hideOnDesktop,
									} )
								}
							/>
							<ToggleControl
								label={ wp.i18n.__(
									'Hide on tablet',
									'nexter-fse'
								) }
								checked={ !! attributes.hideOnTablet }
								onChange={ ( newval ) =>
									setAttributes( {
										hideOnTablet: ! attributes.hideOnTablet,
									} )
								}
							/>
							<ToggleControl
								label={ wp.i18n.__(
									'Hide on mobile',
									'nexter-fse'
								) }
								checked={ !! attributes.hideOnMobile }
								onChange={ ( newval ) =>
									setAttributes( {
										hideOnMobile: ! attributes.hideOnMobile,
									} )
								}
							/>
						</PanelBody>
					</InspectorControls>
				</Fragment>
			);
		};
	},
	'nexter_fse_addRespCont'
);

function nexter_fse_addRespClass( extraProps, blockType, attributes ) {
	const { hideOnDesktop } = attributes;
	const { hideOnTablet } = attributes;
	const { hideOnMobile } = attributes;
	if ( typeof extraProps.className === 'undefined' ) {
		extraProps.className = '';
	}
	if ( typeof hideOnTablet !== 'undefined' && hideOnTablet ) {
		extraProps.className = extraProps.className + ' hide-on-tablet';
	}
	if ( typeof hideOnDesktop !== 'undefined' && hideOnDesktop ) {
		extraProps.className = extraProps.className + ' hide-on-desktop';
	}
	if ( typeof hideOnMobile !== 'undefined' && hideOnMobile ) {
		extraProps.className = extraProps.className + ' hide-on-mobile';
	}
	return extraProps;
}

const nexter_fse_addRespClassEditor = createHigherOrderComponent((BlockListBlock) => {
	return (props) => {
		const {
			attributes: { hideOnTablet,hideOnDesktop,hideOnMobile },
			className,
			name,
		} = props;
		let classes = ''
		if(hideOnMobile){
			classes = classes + ' hide-on-mobile'
		}
		if(hideOnTablet){
			classes = classes + ' hide-on-tablet'
		}
		if(hideOnDesktop){
			classes = classes + ' hide-on-desktop'

		}
		return <BlockListBlock {...props} className = {classnames(className , classes)}/>;
	};
}, 'withClientIdClassName');


addFilter( 'blocks.registerBlockType',
	'nexter-fse/register-responsive-settings',
	nexter_fse_addRespAttr );
addFilter( 'editor.BlockEdit',
	'nexter-fse/add-responsive-settings-control',
	nexter_fse_addRespCont );
addFilter(
	'blocks.getSaveContent.extraProps',
	'nexter-fse/add-responsive-class',
	nexter_fse_addRespClass
);
addFilter(
	'editor.BlockListBlock',
	'nexter-fse/add-responsive-class-editor',
	nexter_fse_addRespClassEditor
);
