import { decodeEntities } from '@wordpress/html-entities'
import { isVisible } from './components/visibility'
import { registerPaymentMethod } from '@woocommerce/blocks-registry'
import { getPaymentMethodData } from '@woocommerce/settings'
import { createElement } from '@wordpress/element';

export const settings = getPaymentMethodData('payever_gateway', []);

settings.forEach(item => {
    if ( ! item.is_enabled ) {
        return;
    }

    const label = (item) => {
        let img = '';
        if (item.icon) {
            img = createElement('img', {
                src: item.icon,
                alt: item.title,
                className: 'payever_icon'
            });
        }

        return createElement('span', { className: 'payever-payment-item' }, item.title, img);
    }

    const content = (item) => {
        let desc = null;
        let terms = null;

        if (item.description) {
            desc = createElement(
                'div',
                {className: 'payever-payment-description'},
                decodeEntities(item.description)
            );
        }

        if (item.terms) {
            terms = createElement('div', {
                className: 'payever-payment-widget',
                ref: async (node) => {
                    if (!node) return;

                    if (node.dataset.initialized) return;
                    node.dataset.initialized = '1';

                    const billingAddress = wp?.data?.select('wc/store/cart')?.getCartData()?.billingAddress;
                    const terms = await createTerms({
                        locale: item.terms.locale,
                        environment: item.terms.environment,
                    }, {
                        paymentMethod: item.terms.payment_method,
                        connectionId: item.terms.variant_id,
                        amount: item.terms.amount,
                        country: billingAddress?.country || item.terms.country,
                        accessToken: item.terms.access_token,
                        styles: {
                            backgroundColor: 'transparent',
                            fontColor: '#751d1d',
                            buttonColor: 'black',
                            padding: '1px 10px',
                        },
                    });
                    terms.mount(node);
                }
            });
        }

        return createElement('div', {className: 'payever-payment-wrapper'}, desc, terms);
    };

    const blockGateway = {
        name: item.id,
        label: label(item),
        content: content(item),
        edit: content(item),
        canMakePayment: (data) => {
            return new Promise(function (resolve, reject) {
                let result = isVisible(item, data);
                resolve(result);
            })
        },
        ariaLabel: decodeEntities(item.title),
        supports: {
            features: item.supports,
            showSavedCards: false,
            showSaveOption: false,
        }
    }

    registerPaymentMethod(blockGateway);
});