import { Settings } from '@greenpay/models'
import { registerPaymentMethod } from '@woocommerce/blocks-registry'
import { decodeEntities } from '@wordpress/html-entities'
import { PAYMENT_METHOD_NAME } from '../data/constants'
import GreenPay from '../app/GreenPay'
import PaymentLabelComponent from '../components/PaymentLabel/PaymentLabel'

/**
 * Blocks payment registeration helper.
 * Doesn't need a implicit React render as the woocommerce function mounts the app
 * @param settings Plugin settings
 */
let registeredWithSettings = false

export const registerPayment = (settings?: Settings): void => {
	if (settings && registeredWithSettings) {
		return
	}

	try {
		const uniqueKey = Date.now().toString()
		if (settings) {
			registerPaymentMethod({
				name: PAYMENT_METHOD_NAME,
				label: (
					<PaymentLabelComponent
						context={settings.context}
						title={decodeEntities(settings.title ?? 'GreenPay')}
						description={settings.description}
						extraMessage={settings.extraMessage}
						key={uniqueKey}
					/>
				),
				// Ignore these syntax errors. Woocommerce on runtime auto injects the component props
				content: <GreenPay key={uniqueKey} />,
				edit: <GreenPay key={uniqueKey} />,
				canMakePayment: () => true,
				ariaLabel: decodeEntities(settings.title ?? 'GreenPay'),
				supports: { features: settings.supports },
			})
			registeredWithSettings = true
		}
	} catch {
		// Silent failure
	}
}