import { useState } from '@wordpress/element';
import type { JSX } from 'react';
import type { Status } from '../../shared/api/types/status';
import { Overlay } from '../../shared/ui/Overlay';
import { ChooseStep } from './ChooseStep';
import { DoneStep } from './DoneStep';
import { FailedStep } from './FailedStep';
import type { FixAllMode } from './fixAllTexts';
import { FIX_ALL_TITLE_ID } from './fixAllTitle';
import { RunningStep } from './RunningStep';
import { useFixAllRun } from './useFixAllRun';

type FixAllDialogProps = {
	mode: FixAllMode;
	status: Status;
	onClosed: () => void;
};

export function FixAllDialog( {
	mode,
	status,
	onClosed,
}: FixAllDialogProps ): JSX.Element {
	const fixAllRun = useFixAllRun();
	const [ agreedStatus ] = useState( status );

	return (
		<Overlay
			kind="modal"
			labelledBy={ FIX_ALL_TITLE_ID }
			onClosed={ onClosed }
		>
			<div className="modal">
				{ fixAllRun.step === 'choose' && (
					<ChooseStep
						mode={ mode }
						status={ agreedStatus }
						onStart={ ( request ) => {
							void fixAllRun.start( request );
						} }
					/>
				) }
				{ fixAllRun.step === 'running' && (
					<RunningStep
						mode={ mode }
						fix={ fixAllRun.fix }
						onStop={ fixAllRun.stop }
					/>
				) }
				{ fixAllRun.step === 'done' && fixAllRun.fix !== null && (
					<DoneStep fix={ fixAllRun.fix } />
				) }
				{ fixAllRun.step === 'failed' && (
					<FailedStep message={ fixAllRun.failureMessage } />
				) }
			</div>
		</Overlay>
	);
}