import type { JSX } from 'react';
import type { Suggestion } from '../../shared/api/types/links';
import { boot } from '../../shared/lib/boot';
import { fieldUrl } from '../../shared/lib/url';
import { AddressField } from './AddressField';
import type { FixPlan } from './fixPlan';
import { useSuggestions } from './linkDetailQueries';
import { RedirectTip } from './RedirectTip';
import { Suggestions } from './Suggestions';
import { TestOutcome } from './TestOutcome';
import type { AddressTest } from './useAddressTest';

type AddressSectionProps = {
	linkId: number;
	plan: FixPlan;
	placesText: string;
	address: string;
	addressTest: AddressTest;
	onAddressChange: ( address: string ) => void;
};

export function AddressSection( {
	linkId,
	plan,
	placesText,
	address,
	addressTest,
	onAddressChange,
}: AddressSectionProps ): JSX.Element {
	const suggestionsQuery = useSuggestions(
		linkId,
		plan.problem === 'broken'
	);
	const suggestions = suggestionsQuery.data ?? [];

	const chooseSuggestion = ( suggestion: Suggestion ) => {
		const suggestedAddress = fieldUrl( suggestion.url, boot.siteUrl );

		onAddressChange( suggestedAddress );
		addressTest.runTest( suggestedAddress );
	};

	return (
		<div className="sec">
			{ plan.isRedirect && <RedirectTip placesText={ placesText } /> }
			<AddressField
				isRedirect={ plan.isRedirect }
				address={ address }
				isChecking={ addressTest.testState.kind === 'checking' }
				onType={ ( typedAddress ) => {
					onAddressChange( typedAddress );
					addressTest.forgetTest();
				} }
				onTest={ () => {
					addressTest.runTest( address );
				} }
			/>
			<TestOutcome testState={ addressTest.testState } />
			{ suggestions.length > 0 && (
				<Suggestions
					suggestions={ suggestions }
					onChoose={ chooseSuggestion }
				/>
			) }
		</div>
	);
}