const { registerPlugin } = wp.plugins;
const { useSelect } = wp.data;
const { PluginPrePublishPanel } = wp.editor;
const { PanelBody, PanelRow } = wp.components;
// const { Fragment } = wp.element;
const { __ } = wp.i18n;

const MyPrePublishPanel = () => {
	const { metas } = useSelect( ( select ) => {
		return {
			metas: select( 'core/editor' ).getEditedPostAttribute( 'meta' ),
		};
	} );

	const hasPostThumbnail = () => {
		return wp.data.select( 'core/editor' ).getEditedPostAttribute( 'featured_media' ) > 0;
		// return currentPost._links['wp:featuredmedia'] && currentPost._links['wp:featuredmedia'].length > 0;
	};
	const autoGenerate = window.SAFI.options.automation || false;
	const willAutoGenerate = ( () => {
		const value = window.SAFI.options.automationValidation;
		if ( hasPostThumbnail() && value === 1 ) {
			return 0
		}

		return window.SAFI.options.automationValidation || 0;
	} )();
	const disableAutoGen = metas?._safi_disable_autogen ? true : false;

	return (
		<PluginPrePublishPanel
			className="my-prepublish-panel"
			title="Smart Auto Featured Image"
			icon="format-image"
			initialOpen={true}
		>
			<PanelBody>
				<PanelRow>
					<div className="auto-generate">
						{autoGenerate === false &&
							<div className="safi-auto-generate autogen-disabled">{__( ' is disabled', 'wpjoli-safi' )}</div>
						}
						{/* {autoGenerate === true &&
                    <div>{__( 'Auto generate on save is enabled', 'wpjoli-safi' )}</div>
                } */}
						{autoGenerate === true && willAutoGenerate === 0 &&
							<>
								<div className="safi-auto-generate no-autogen">{__( 'No AutoGen on Publish', 'wpjoli-safi' )}</div>
							</>
						}
						{disableAutoGen === false && autoGenerate === true && ( willAutoGenerate === 1 || willAutoGenerate === 2 ) &&
							<>
								<div className="safi-auto-generate autogen" style={{ marginTop: 0 }}>{__( 'AutoGen on Publish', 'wpjoli-safi' )}</div>
								<p style={{ color: 'green', fontWeight: '500' }}>{__( 'This post meets the conditions for auto generation.', 'wpjoli-safi' )}</p>
								<p style={{ color: 'green', fontWeight: '500' }}>{__( 'A featured image request will run in the background with the default or the selected template. The image will be generated after your press the Publish button.', 'wpjoli-safi' )}</p>
							</>
						}
						{disableAutoGen === true && autoGenerate === true && ( willAutoGenerate === 1 || willAutoGenerate === 2 ) &&
							<>
								<div className="safi-auto-generate no-autogen" style={{ marginTop: 0 }}>{__( 'No AutoGen on Publish', 'wpjoli-safi' )}</div>
								<p>{__( 'The auto generation for this post has been manually disabled.', 'wpjoli-safi' )}</p>
							</>
						}
						{autoGenerate === true && willAutoGenerate === 2 &&
							<div>{'🔵 ' + __( 'AutoGen (forced)', 'wpjoli-safi' )}</div>
						}
					</div>
				</PanelRow>
			</PanelBody>
		</PluginPrePublishPanel>
	);
};

registerPlugin( 'my-plugin-prepublish-panel', {
	render: MyPrePublishPanel,
	icon: null,
} );




// const { registerPlugin } = wp.plugins;

import SAFI_FI_Settings_Panel from './safi-featured-image-settings-panel';

const userTemplates = window.SafiData?.templates || [];

// const SAFISettings = () => {
//     return (
//         <SAFI_FI_Settings_Panel templates={userTemplates} />
//     );
// }

// registerPlugin( 'safi-featured-image-settings-panel', {
//     render: SAFISettings,
//     icon: 'format-image',
// } );

var el = wp.element.createElement;

/**
 * Inserts our SAFI module above the Featured Image element in the gutenberg sidebar
 * @param {*} OriginalComponent 
 * @returns 
 */
function wrapPostFeaturedImage( OriginalComponent ) {
	return function ( props ) {
		return el(
			wp.element.Fragment,
			{},
			// 'Prepend above',
			<SAFI_FI_Settings_Panel templates={userTemplates} />,
			el( OriginalComponent, props ),
		);
	};
}

wp.hooks.addFilter(
	'editor.PostFeaturedImage',
	'smart-auto-featured-image/wrap-post-featured-image',
	wrapPostFeaturedImage
);