const STRIPE_TEST_PK = 'pk_test_';
const DETACH_ENDPOINT = NODE_ENV == 'production' ? '<prod_endpoint>' : '<test_endpoint>'

// Create an instance of Elements.
var stripe = Stripe(STRIPE_TEST_PK);
var elements = stripe.elements();

// Custom styling can be passed to options when creating an Element.
// (Note that this demo uses a wider set of styles than the guide below.)
var style = {
    base: {
        color: '#32325d',
        fontFamily: '"Helvetica Neue", Helvetica, sans-serif',
        fontSmoothing: 'antialiased',
        fontSize: '16px',
        '::placeholder': {
            color: '#aab7c4'
        },
        width: '100%'
    },
    invalid: {
        color: '#fa755a',
        iconColor: '#fa755a'
    }
};

// RELEVANT ELEMENTS
// Create an instance of the card Element.
var card = elements.create('card', { style: style });

// Locally store stripe client secret
var clientSecret = document.getElementById('payment-form').dataset.secret
var paymentMethodId = document.getElementById('payment-form').dataset.payment_method_id
var type = document.getElementById('payment-form').dataset.type
var customer = document.getElementById('payment-form').dataset.customer

// spinner
var spinner = document.getElementById('spinner')

// Add an instance of the card Element into the `card-element` <div>.
card.mount('#card-element');

// Get cardholder name input
var cardholder = document.getElementById('cardholder-name')

// Handle real-time validation errors from the card Element.
card.on('change', function (event) {
    var displayError = document.getElementById('status-msg');
    if (event.error) {
        displayError.innerHTML = event.error.message;

    } else {
        displayError.innerHTML = '';

    }
});

// Handle form submission.
var form = document.getElementById('payment-form');
form.addEventListener('submit', function (event) {
    event.preventDefault();
    console.log("Type: " + type)

    // hide all form stuff -disable form input/submissions
    document.getElementById('payment-form').style.display = 'none';
    document.getElementById('save-button').style.display = 'none';
    document.getElementById('agreement').style.display = 'none';

    // show spinner
    document.getElementById('spinner').style.display = 'block';

    // Confirm card details
    stripe.confirmCardSetup(
        clientSecret,
        {
            payment_method: {
                card: card,
                billing_details: {
                    name: cardholder.value
                }
            }
        })
        .then(result => {
            if (result.error) {
                console.log("confirmCardSetup error condition")
                // hide spinner
                spinner.style.display = 'none';

                // show all form stuff
                document.getElementById('payment-form').style.display = 'flex';
                document.getElementById('save-button').style.display = 'block';
                document.getElementById('agreement').style.display = 'block';

                // Inform the user if there was an error.
                var errorElement = document.getElementById('status-msg');
                errorElement.innerHTML = result.error.message;
                errorElement.style.display = 'flex';
            } else {
                console.log("else clause")

                if (type == "edit") {
                    // call to server, detach old payment method
                    $.ajax({
                        url: DETACH_ENDPOINT,
                        data: {
                            customer: customer
                        },
                        success: function (res) {
                            if (res.result == 'success') {
                                spinner.style.display = 'none';

                                // Payment Method setup Succeessfully, display message
                                document.getElementById('success-msg').innerHTML = 'Payment edit successful! \nYou can close this screen now.';
                                document.getElementById('success-msg').style.display = 'block';
                                document.getElementById('success-wrapper').style.display = 'flex';
                            } else {
                                spinner.style.display = 'none';
                                document.getElementById('status-msg').innerHTML = res.message;
                                document.getElementById('status-msg').style.display = 'block';
                                document.getElementById('status-wrapper').style.display = 'flex';
                            }
                        },
                        error: function (err) {
                            spinner.style.display = 'none';
                            document.getElementById('status-msg').innerHTML = err
                            document.getElementById('status-wrapper').style.display = 'flex';
                        }
                    })
                }
            };
        })
})