/**
 * External dependencies
 */
import { __ } from '@wordpress/i18n';
import { recordEvent } from '@woocommerce/tracks';
import {
	WCPayCard,
	WCPayCardFooter,
	WCPayCardBody,
	WCPayBenefitCard,
} from '@woocommerce/onboarding';
import { useDispatch } from '@wordpress/data';

/**
 * Internal dependencies
 */

import { Action } from '../Action';
import { connectWcpay } from './utils';

export const Suggestion = ( { paymentGateway, onSetupCallback = null } ) => {
	const {
		id,
		needsSetup,
		installed,
		enabled: isEnabled,
		installed: isInstalled,
	} = paymentGateway;

	const { createNotice } = useDispatch( 'core/notices' );
	// When the WC Pay is installed and onSetupCallback is null
	// Overwrite onSetupCallback to redirect to the setup page
	// when the user clicks on the "Finish setup" button.
	// WC Pay doesn't need to be configured in WCA.
	// It should be configured in its onboarding flow.
	if ( installed && onSetupCallback === null ) {
		onSetupCallback = () => {
			connectWcpay( createNotice );
		};
	}

	return (
		<>
			<WCPayCard>
				<WCPayCardBody
					heading={ 'Accept payments and manage your business.' }
					onLinkClick={ () => {
						recordEvent( 'tasklist_payment_learn_more' );
					} }
				>
					<Action
						id={ id }
						hasSetup={ true }
						needsSetup={ needsSetup }
						isEnabled={ isEnabled }
						isRecommended={ true }
						isInstalled={ isInstalled }
						hasPlugins={ true }
						setupButtonText={
							installed && needsSetup
								? __( 'Finish setup', 'woocommerce' )
								: __( 'Install', 'woocommerce' )
						}
						onSetupCallback={ onSetupCallback }
					/>
				</WCPayCardBody>
				<WCPayCardFooter />
			</WCPayCard>
			<WCPayBenefitCard />
		</>
	);
};