/**
 * WordPress dependencies
 */
import { useSelect } from '@safe-wordpress/data';
import { applyFilters } from '@safe-wordpress/hooks';
import {
	PluginDocumentSettingPanel,
	store as EDITOR,
} from '@safe-wordpress/editor';
import { _x } from '@safe-wordpress/i18n';

/**
 * External dependencies
 */
import {
	FormActionSettings,
	FormGeneralSettings,
	FormPatterns,
	FormSpamSettings,
} from '@nelio/forms/components';
import { useFormMeta } from '@nelio/forms/hooks';

export const FormEditorExtensions = (): JSX.Element => {
	const [ actions, setActions ] = useFormMeta( 'actions' );
	const [ generalSettings, setGeneralSettings ] = useFormMeta( 'general' );
	const [ spamSettings, setSpamSettings ] = useFormMeta( 'spam' );

	const formId = useSelect(
		( select ) => select( EDITOR ).getEditedPostAttribute( 'id' ) as number
	);

	const EntryRecordingComponent = applyFilters(
		'nelio_forms.get_entry_recording_component',
		() => null
	) as () => JSX.Element | null;

	return (
		<>
			<PluginDocumentSettingPanel
				name="nelio-forms-patterns-panel"
				className="nelio-forms-patterns-panel"
				title={ _x( 'Patterns', 'text', 'nelio-forms' ) }
			>
				<FormPatterns />
			</PluginDocumentSettingPanel>
			<PluginDocumentSettingPanel
				name="nelio-forms-general-settings-panel"
				className="nelio-forms-general-settings-panel"
				title={ _x( 'General Settings', 'text', 'nelio-forms' ) }
			>
				<FormGeneralSettings
					{ ...{ generalSettings, setGeneralSettings } }
				/>
			</PluginDocumentSettingPanel>
			<PluginDocumentSettingPanel
				name="nelio-forms-actions-settings-panel"
				className="nelio-forms-actions-settings-panel"
				title={ _x( 'Submission Actions', 'text', 'nelio-forms' ) }
			>
				<EntryRecordingComponent />
				<FormActionSettings { ...{ formId, actions, setActions } } />
			</PluginDocumentSettingPanel>
			<PluginDocumentSettingPanel
				name="nelio-forms-spam-settings-panel"
				className="nelio-forms-spam-settings-panel"
				title={ _x( 'Spam Detection', 'text', 'nelio-forms' ) }
			>
				<FormSpamSettings { ...{ spamSettings, setSpamSettings } } />
			</PluginDocumentSettingPanel>
		</>
	);
};