import { __ } from '@wordpress/i18n';
import { registerPaymentMethod } from '@woocommerce/blocks-registry';
import { decodeEntities } from '@wordpress/html-entities';
import { getSetting } from '@woocommerce/settings';

const settings = getSetting('ahapaybuynowpaylater_data', {}); // Use the correct key

const defaultLabel = __('AhaPay Payments', 'woo-gutenberg-products-block');


const Content = () => decodeEntities(settings.description || '');
const Icon = () => {
    return settings.icon
        ? <img src={settings.logoUrl} className="ahapay-block-logo" />
        : ''
}
const Label = () => (

    <span className="ahapay-block-label">
        {decodeEntities(settings.title || defaultLabel)}
        <img src={settings.logoUrl} className="ahapay-block-logo" />
    </span>

);

const AhaPayUI = () => (

        <div >
            <div className="ahapay-card-header">
                <span>{__('Split your purchase in 4 equal payments, 0% interest', 'ahapay-buy-now-pay-later')}</span>
            </div>
            <div className="ahapay-subtext">
                {__('Pay 25% today and the remaining in 3 monthly payments', 'ahapay-buy-now-pay-later')}
            </div>
            <div className="ahapay-progress-bar">
                <div className="ahapay-progress"></div>
            </div>
            <div className="ahapay-timeline">
                <div><strong>{__('today', 'ahapay')}</strong><br />25%</div>
                <div><strong>{__('1 month later', 'ahapay')}</strong><br />25%</div>
                <div><strong>{__('2 months later', 'ahapay')}</strong><br />25%</div>
                <div><strong>{__('3 months later', 'ahapay')}</strong><br />25%</div>
            </div>
        </div>

);

const AhaPayGateway = {
    name: 'ahapaybuynowpaylater',
    label: <Label />,
    content: <AhaPayUI />,     // updated
    edit: <AhaPayUI />,        // updated
    canMakePayment: () => true,
    ariaLabel: defaultLabel,
    supports: {
        features: settings.supports || [],
    },
    placeOrderButtonLabel: __('Pay with AhaPay', 'woo-gutenberg-products-block'),
    paymentMethodId: 'ahapaybuynowpaylater',
    onSubmit: () => {},
    billing: {
        required: true,
    },
};

registerPaymentMethod({
    ...AhaPayGateway,
    // Provide a string for the label property

    label: <Label />,
    renderLabel: () => <Label />,
});