$(window).on('load', function() {
    init_paypal_checkout();
});

function init_paypal_checkout() {
    if ($('#paypal-button-container').length > 0) {
        // Render the button component
        paypal
            .Buttons({
               message: {
                    amount: $('#checkout_order_total_cell').data('order_total'),
                    position: 'top',
                    align: 'center'
                },
                // Sets up the transaction when a payment button is clicked
                createOrder: function(data) {
                    //console.log('button create');
                    return fetch('/paypal_checkout.php', {
                        method: "POST",
                        // Use the "body" parameter to optionally pass additional order information
                        // such as product ID or amount
                        body: JSON.stringify({
                            rt: 'create',
                            paymentSource: data.paymentSource,
                        }),
                    })
                    .then((response) => response.json())
                    .then((order) => order.id);
                },
                // Finalize the transaction after payer approval
                onApprove: function(data, actions) {
                    //console.log('button capture');
                    return fetch('/paypal_checkout.php', {
                        method: "POST",
                        body: JSON.stringify({
                            rt: 'capture',
                            paypal_order_id: data.orderID,
                        }),
                    })
                    .then((response) => response.json())
                    .then((orderData) => {
                        /*
                        // Successful capture! For dev/demo purposes:
                        console.log(
                            "button capture result",
                            orderData,
                            JSON.stringify(orderData, null, 2),
                        );
                        // Show a success message within this page. For example:
                        // var element = document.getElementById('paypal-button-container');
                        // element.innerHTML = '<h3>Thank you for your payment!</h3>';
                        // Or go to another URL: actions.redirect('thank_you.html');
                        */
                        console.log(
                            "button capture result",
                            orderData,
                            JSON.stringify(orderData, null, 2),
                        );

                        if (!orderData.purchase_units) {
                            throw new Error(JSON.stringify(orderData));
                        }

                        var transaction_status = orderData?.purchase_units?.[0]?.payments?.captures?.[0]?.status;
                        //console.log(transaction_status);
                        if(transaction_status === 'DECLINED'){
                            msg = encodeURI('An error occurred while trying to process your transaction.');
                            window.location = '/cart/checkout?cart_action=checkout&msg=' + msg;

                        }
                        else{
                            window.location = '/cart/thank-you?cart_action=paypal_confirm';
                        }
                    });
                },
                onError: function(error) {
                    // Do something with the error from the SDK
                    //console.log('button error', error);
                    msg = encodeURI('An error occurred while trying to process your transaction (ppbt error).');
                    window.location = '/cart/checkout?cart_action=checkout&msg=' + msg;
                },
            })
            .render("#paypal-button-container");

        // Create the Card Fields Component and define callbacks
        const cardField = paypal.CardFields({
            createOrder: function(data) {
                //console.log('cf create');
                return fetch("/paypal_checkout.php", {
                        method: "POST",
                        body: JSON.stringify({
                            rt: 'create',
                            paymentSource: data.paymentSource,
                        }),
                    })
                    .then((res) => {
                        return res.json();
                    })
                    .then((orderData) => {
                        return orderData.id;
                    });
            },
            onApprove: function(data) {
                //console.log('cf capture');
                const {
                    orderID
                } = data;
                return fetch("/paypal_checkout.php", {
                    method: "POST",
                    body: JSON.stringify({
                        rt: 'capture',
                        paypal_order_id: data.orderID,
                    }),
                })
                .then((res) => {
                    return res.json();
                })
                .then((orderData) => {
                    /*console.log(
                        "cf capture result",
                        orderData,
                        JSON.stringify(orderData, null, 2),
                    );*/

                    if (!orderData.purchase_units) {
                        throw new Error(JSON.stringify(orderData));
                    }

                    var transaction_status = orderData?.purchase_units?.[0]?.payments?.captures?.[0]?.status;
                    //console.log(transaction_status);
                    if(transaction_status === 'DECLINED'){
                        msg = encodeURI('An error occurred while trying to process your transaction.');
                        window.location = '/cart/checkout?cart_action=checkout&msg=' + msg;

                    }
                    else{
                        window.location = '/cart/thank-you?cart_action=paypal_confirm';
                    }
                });
            },
            onError: function(error) {
                // Do something with the error from the SDK
                //console.log('cf error', error);
                msg = encodeURI('An error occurred while trying to process your transaction (ppcf error).');
                window.location = '/cart/checkout?cart_action=checkout&msg=' + msg;
            },
        });
        // Render each field after checking for eligibility
        if (cardField.isEligible()) {
            const nameField = cardField.NameField();
            nameField.render("#card-name-field-container");

            const numberField = cardField.NumberField();
            numberField.render("#card-number-field-container");

            const cvvField = cardField.CVVField();
            cvvField.render("#card-cvv-field-container");

            const expiryField = cardField.ExpiryField();
            expiryField.render("#card-expiry-field-container");

            // Add click listener to submit button and call the submit function on the CardField component
            document
                .getElementById("card-field-submit-button")
                .addEventListener("click", () => {
                    $('#card-field-submit-button').text('Submitting Order...')
                    $('#card-field-submit-button').attr('disabled','disabled');
                    $('#card-field-submit-button').css({'background-color': '#eee'});

                    if($('#pp_checkout_error').length > 0){
                        $('#pp_checkout_error').text('');
                    }


                    cardField.submit({
                        // From your billing address fields
                        billingAddress: {
                            addressLine1: document.getElementById(
                                "bStreet1",
                            ).value,
                            addressLine2: document.getElementById(
                                "bStreet2",
                            ).value,
                            adminArea1: document.getElementById(
                                "bState",
                            ).value,
                            adminArea2: document.getElementById(
                                "bCity",
                            ).value,
                            countryCode: document.getElementById(
                                "bCountry",
                            ).value,
                            postalCode: document.getElementById(
                                "bZipCode",
                            ).value,
                        }
                    }).then(() => {
                        // submit successful
                        console.log('success');
                    }).catch((error) => {
                        // Do something with the error from the SDK
                        //console.log('card-field-submit-button' + error);
                        $('#card-field-submit-button').text('Pay Now with Credit Card')
                        $('#card-field-submit-button').removeAttr('disabled');
                        $('#card-field-submit-button').css({'background-color': '#000'});

                        if($('#pp_checkout_error').length == 0){
                            $('#paypal-checkout-form').prepend('<div class="error" id="pp_checkout_error" />');
                        }

                        $('#pp_checkout_error').text(error);
                    });
                });
        }
    }
}