import {useEffect, useState} from '@wordpress/element';
import {registerExpressPaymentMethod, registerPaymentMethod} from '@woocommerce/blocks-registry';
import {loadPaypalScript} from '../../../ppcp-button/resources/js/modules/Helper/ScriptLoading'
import GooglepayManager from "./GooglepayManager";
import {loadCustomScript} from "@paypal/paypal-js";

const ppcpData = wc.wcSettings.getSetting('ppcp-gateway_data');
const ppcpConfig = ppcpData.scriptData;

const buttonData = wc.wcSettings.getSetting('ppcp-googlepay_data');
const buttonConfig = buttonData.scriptData;

if (typeof window.PayPalCommerceGateway === 'undefined') {
    window.PayPalCommerceGateway = ppcpConfig;
}

console.log('ppcpData', ppcpData);
console.log('ppcpConfig', ppcpConfig);
console.log('buttonData', buttonData);
console.log('buttonConfig', buttonConfig);

const GooglePayComponent = () => {
    console.log('GooglePayComponent render');

    const [bootstrapped, setBootstrapped] = useState(false);
    const [paypalLoaded, setPaypalLoaded] = useState(false);
    const [googlePayLoaded, setGooglePayLoaded] = useState(false);

    const bootstrap = function () {
        const manager = new GooglepayManager(buttonConfig, ppcpConfig);
        manager.init();


    };

    useEffect(() => {
        // Load GooglePay SDK
        loadCustomScript({ url: buttonConfig.sdk_url }).then(() => {
            setGooglePayLoaded(true);
        });

        // Load PayPal
        loadPaypalScript(ppcpConfig, () => {
            setPaypalLoaded(true);
        });
    }, []);

    useEffect(() => {
        if (!bootstrapped && paypalLoaded && googlePayLoaded) {
            setBootstrapped(true);
            bootstrap();
        }
    }, [paypalLoaded, googlePayLoaded]);

    return (
        <div id={buttonConfig.button.wrapper.replace('#', '')}></div>
    );
}

const features = ['products'];
let registerMethod = registerExpressPaymentMethod;

registerMethod({
    name: buttonData.id,
    label: <div dangerouslySetInnerHTML={{__html:  buttonData.title}}/>,
    content: <GooglePayComponent isEditing={false}/>,
    edit: <GooglePayComponent isEditing={true}/>,
    ariaLabel: buttonData.title,
    canMakePayment: () => buttonData.enabled,
    supports: {
        features: features,
    },
});