import {addFilter} from '@wordpress/hooks';
import {FloToggleControl, FloTextControl} from 'components';

import {InspectorAdvancedControls} from '@wordpress/block-editor';

const flo_blocks = [
	'flo-block/archive-title',
	'flo-block/category-switcher',
	'flo-block/comments',
	'flo-block/faq1',
	'flo-block/faq2',
	'flo-block/gallery',
	'flo-block/post-list',
	'flo-block/post-grid',
	'flo-block/post-cards',
	'flo-block/related-items',
	'flo-block/search-title',
	'flo-block/slider',
	'flo-block/testimonials',
	'flo-block/title-block',
	'flo-block/text-block',
	'flo-block/newsletter',
	'flo-block/form-block',
	'flo-block/button-block',
	'flo/flo-flex-builder',
];

const flo_full_width_blocks = [
	'flo-block/slider',
	'flo-block/gallery',
	'flo-block/post-list',
];

function addVisibilityAttributes(settings, name) {
	if (typeof settings.attributes !== 'undefined') {
		if (flo_blocks.includes(name)) {
			settings.attributes = Object.assign(settings.attributes, {
				hideOnDesktop: {
					type: 'boolean',
					default: false,
				},
				hideOnMobile: {
					type: 'boolean',
					default: false,
				},
			});
		}
	}
	return settings;
}

addFilter(
	'blocks.registerBlockType',
	'flo/extend-flo-blocks',
	addVisibilityAttributes
);

const coverAdvancedControls = wp.compose.createHigherOrderComponent(
	(BlockEdit) => {
		return (props) => {
			const {attributes, setAttributes, isSelected} = props;

			return (
				<>
					{isSelected && flo_full_width_blocks.includes(props.name) && (
						<InspectorAdvancedControls>
							<FloTextControl
								autoComplete="off"
								label={wp.i18n.__('Theme Content Width', 'flo')}
								class="theme-content-width-control components-text-control__input"
								placeholder={wp.i18n.__('Theme Content Width', 'flo')}
								value={attributes.themeContentWidth}
								onChange={(value) => setAttributes({themeContentWidth: value})}
								help={wp.i18n.__(
									'If you know the content width for this page, add it here and it will be used to deliver optimized image sizes. Example of possible values: 58rem, 840px, 60vw etc.',
									'flo'
								)}
							/>
						</InspectorAdvancedControls>
					)}
					{isSelected && flo_blocks.includes(props.name) && (
						<InspectorAdvancedControls>
							<FloToggleControl
								label={wp.i18n.__('Hide on Desktop', 'flo')}
								checked={!!attributes.hideOnDesktop}
								onChange={() =>
									setAttributes({hideOnDesktop: !attributes.hideOnDesktop})
								}
							/>
							<FloToggleControl
								label={wp.i18n.__('Hide on Mobile', 'flo')}
								checked={!!attributes.hideOnMobile}
								onChange={() =>
									setAttributes({hideOnMobile: !attributes.hideOnMobile})
								}
							/>
						</InspectorAdvancedControls>
					)}
					<BlockEdit {...props} />
				</>
			);
		};
	},
	'coverAdvancedControls'
);

addFilter(
	'editor.BlockEdit',
	'awp/cover-advanced-control',
	coverAdvancedControls
);
