/**
 * ZainPay WooCommerce Blocks Integration
 */

const { registerPaymentMethod } = window.wc.wcBlocksRegistry;
const { createElement, Fragment } = window.wp.element;
const { __ } = window.wp.i18n;
const { decodeEntities } = window.wp.htmlEntities;
const { getSetting } = window.wc.wcSettings;

const settings = getSetting( 'pgzw_zainpay_data', {} );
const defaultLabel = __( 'ZainPay', 'payment-gateway-for-zainpay-for-woocommerce' );
const label = decodeEntities( settings.title ) || defaultLabel;

/**
 * Content component
 */
const Content = () => {
	return decodeEntities( settings.description || '' );
};

/**
 * Label component with logo
 */
const Label = () => {
	return createElement(
		'div',
		{
			style: {
				display: 'flex',
				flexDirection: 'row',
				gap: '0.5rem',
				alignItems: 'center'
			}
		},
		[
			createElement( 'span', { key: 'label' }, label ),
			settings.logo_url && createElement(
				'img',
				{
					key: 'logo',
					src: settings.logo_url,
					alt: label,
					style: {
						height: '24px',
						maxWidth: '100px'
					}
				}
			)
		]
	);
};

/**
 * ZainPay payment method configuration
 */
const ZainPayPaymentMethod = {
	name: 'pgzw_zainpay',
	label: createElement( Label ),
	content: createElement( Content ),
	edit: createElement( Content ),
	canMakePayment: () => true,
	ariaLabel: label,
	supports: {
		features: settings.supports || []
	}
};

// Register the payment method
registerPaymentMethod( ZainPayPaymentMethod );