import { __ } from '@wordpress/i18n';
import type { JSX } from 'react';
import type { Fix } from '../../shared/api/types/fixes';
import { classNames } from '../../shared/lib/classNames';
import { timeAgoSentence } from '../../shared/lib/timeAgo';
import { Button } from '../../shared/ui/Button';
import { Icon } from '../../shared/ui/Icon';
import { FixStatePill } from './FixStatePill';
import { fixDetail, fixIcon, fixTitle } from './historyTexts';
import { useHistoryEntryActions } from './useHistoryEntryActions';

type HistoryEntryProps = {
	fix: Fix;
	now: number;
};

export function HistoryEntry( { fix, now }: HistoryEntryProps ): JSX.Element {
	const { work, runUndo, runContinue } = useHistoryEntryActions( fix );
	const isUndone = fix.state === 'undone';
	const isBusy = work !== null;

	return (
		<div className={ classNames( 'hist', isUndone && 'undone' ) }>
			<span className="dot">
				<Icon name={ fixIcon( fix.action ) } />
			</span>
			<div className="c-main">
				<span className="hist-title">{ fixTitle( fix ) }</span>
				<span className="item-sub">
					{ timeAgoSentence( fix.created_at, now ) }.{ ' ' }
					{ fixDetail( fix ) }
				</span>
			</div>
			<FixStatePill fix={ fix } />
			<span className="actions">
				{ fix.state === 'running' && (
					<Button
						size="sm"
						icon="play"
						busy={ work === 'continue' }
						disabled={ isBusy }
						onClick={ () => {
							void runContinue();
						} }
					>
						{ __( 'Continue', 'aiplaz-link-checkup' ) }
					</Button>
				) }
				<Button
					size="sm"
					icon="undo"
					busy={ work === 'undo' }
					disabled={ isUndone || isBusy }
					onClick={ () => {
						void runUndo();
					} }
				>
					{ __( 'Undo', 'aiplaz-link-checkup' ) }
				</Button>
			</span>
		</div>
	);
}