import { useEffect } from '@wordpress/element';
import { usePayPalCardFields } from '@paypal/react-paypal-js';

export const CheckoutHandler = ( {
	getCardFieldsForm,
	getSavePayment,
	hasSubscriptionProducts,
	saveCardText,
	is_vaulting_enabled,
} ) => {
	const { cardFieldsForm } = usePayPalCardFields();

	useEffect( () => {
		getCardFieldsForm( cardFieldsForm );
	}, [] );

	if ( ! is_vaulting_enabled ) {
		return null;
	}

	return (
		<>
			<input
				type="checkbox"
				id="save"
				name="save"
				onChange={ ( e ) => getSavePayment( e.target.checked ) }
				defaultChecked={ hasSubscriptionProducts }
				disabled={ hasSubscriptionProducts }
			/>
			<label htmlFor="save">{ saveCardText }</label>
		</>
	);
};