/**
 * Command to [describe your command].
 */

import { useState } from 'react';
import { useCommand } from '@wordpress/commands';
import apiFetch from '@wordpress/api-fetch';
import ProcessingModal from '../modals/ProcessingModal';
import { __ } from '@wordpress/i18n';

// Optional: Add an icon (SVG element).
const YourIcon = <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor">
	<path d="..." />
</svg>;

/**
 * Hook to register the [Your Command Name] command.
 *
 * @return {JSX.Element|null} The YourCommandName component.
 */
export function YourCommandNameCommand() {
	const [ isOpen, setIsOpen ] = useState( false );
	const [ isLoading, setIsLoading ] = useState( false );
	const [ message, setMessage ] = useState( '' );
	const [ error, setError ] = useState( false );
	const [ warning, setWarning ] = useState( false );

	useCommand( {
		name: 'dlx-cmd-starter-your-command-name',
		label: 'Your Command Label',
		icon: YourIcon, // Optional: Remove if no icon needed.
		keywords: [ 'keyword1', 'keyword2', 'keyword3' ],
		callback: () => {
			setIsOpen( true );
			setIsLoading( true );
			setError( false );
			setWarning( false );
			setMessage( '' );

			apiFetch( {
				path: '/cmd-starter/v1/your_command_name',
				method: 'POST',
			} )
				.then( ( result ) => {
					setIsLoading( false );
					if ( result.success ) {
						setMessage( result.response || __( 'Command executed successfully.', 'cmd-starter' ) );
						setTimeout( () => {
							setIsOpen( false );
						}, 2000 );
					} else {
						setError( true );
						setMessage( result.response || __( 'Failed to execute command.', 'cmd-starter' ) );
					}
				} )
				.catch( ( err ) => {
					setIsLoading( false );
					// Check if it's a permission error.
					if ( err.code === 'rest_forbidden' || err.status === 401 || err.status === 403 ) {
						setError( true );
						setMessage( __( 'You do not have permission to execute this command.', 'cmd-starter' ) );
					} else {
						setError( true );
						setMessage( err.message || __( 'An error occurred while executing the command.', 'cmd-starter' ) );
					}
				} );
		},
		context: 'admin', // Options: 'admin', 'site-editor', 'view'. Use 'admin' for both admin and block editor.
	} );

	return (
		<ProcessingModal
			title={ __( 'Your Command Title', 'cmd-starter' ) }
			processingMessage={ __( 'Processing command…', 'cmd-starter' ) }
			isOpen={ isOpen }
			onClose={ () => setIsOpen( false ) }
			isLoading={ isLoading }
			message={ message }
			error={ error }
			warning={ warning }
		/>
	);
}

import { YourCommandNameCommand } from './components/commands/YourCommandName';

// Inside the CommandsAdmin component:
const YourCommandModal = YourCommandNameCommand();
return (
	<>
		{ YourCommandModal }
		{ /* ... other commands */ }
	</>
);

import { YourCommandNameCommand } from './components/commands/YourCommandName';

// Inside the CommandsBlockEditor component:
const YourCommandModal = YourCommandNameCommand();
return (
	<>
		{ YourCommandModal }
		{ /* ... other commands */ }
	</>
);

import { YourCommandNameCommand } from './components/commands/YourCommandName';

// Inside the CommandsFrontend component:
const YourCommandModal = YourCommandNameCommand();
return (
	<>
		{ YourCommandModal }
		{ /* ... other commands */ }
	</>
);

import { YourCommandNameCommand } from './components/commands/YourCommandName';

// Inside the CommandsNetwork component:
const YourCommandModal = YourCommandNameCommand();
return (
	<>
		{ YourCommandModal }
		{ /* ... other commands */ }
	</>
);