import { __ } from '@wordpress/i18n';
import type { JSX } from 'react';
import type { ScanAction, ScanState } from '../shared/api/types/status';
import { useScanAction } from '../shared/api/useScanAction';
import type { IconName } from '../shared/ui/Icon';
import { Button } from '../shared/ui/Button';

type ScanButtonLook = {
	action: ScanAction;
	icon: IconName | undefined;
	label: string;
};

function scanButtonLook( scanState: ScanState ): ScanButtonLook {
	switch ( scanState ) {
		case 'running':
			return {
				action: 'pause',
				icon: 'pause',
				label: __( 'Pause scan', 'aiplaz-link-checkup' ),
			};
		case 'paused':
			return {
				action: 'resume',
				icon: undefined,
				label: __( 'Continue scan', 'aiplaz-link-checkup' ),
			};
		case 'idle':
			return {
				action: 'start',
				icon: 'scan',
				label: __( 'Scan now', 'aiplaz-link-checkup' ),
			};
	}
}

export function ScanButton( {
	scanState,
}: {
	scanState: ScanState;
} ): JSX.Element {
	const scanAction = useScanAction();
	const look = scanButtonLook( scanState );

	return (
		<Button
			variant="primary"
			icon={ look.icon }
			disabled={ scanAction.isPending }
			onClick={ () => {
				scanAction.mutate( look.action );
			} }
		>
			{ look.label }
		</Button>
	);
}