// A reference to Stripe.js
var stripe;

// Disable the button until we have Stripe set up on the page
document.querySelector("button").disabled = true;

fetch("/api/create_payment_intent", {
    method: "POST",
    headers: {
        "Content-Type": "application/json"
    },
})
    .then(function(result) {
        return result.json();
    })
    .then(function(data) {
        return setupElements(data);
    })
    .then(function({ stripe, card, clientSecret }) {

        var form = document.getElementById("payment-form");
        form.addEventListener("submit", function(event) {
            event.preventDefault();
            // Initiate payment when the submit button is clicked
            pay(stripe, card, clientSecret);
        });
    });

// Set up Stripe.js and Elements to use in checkout form
var setupElements = function(data) {
    stripe = Stripe(data.publishableKey);
    var elements = stripe.elements();

    var elementStyles = {
        base: {
            color: '#fff',
            fontFamily: 'Ubuntu, sans-serif',
            fontSize: '16px',
            '::placeholder': {
                color: '#fff',
            },
        },
        invalid: {
            color: '#fff',
            ':focus': {
                color: '#FA755A',
            },
            '::placeholder': {
                color: '#FFCCA5',
            },
        },
    };

    var elementClasses = {
        focus: 'focus',
        empty: 'empty',
        invalid: 'invalid',
    };

    var cardNumberElement = elements.create('cardNumber', {
        style: elementStyles,
        classes: elementClasses,
    });
    cardNumberElement.mount("#ccNumber-container");
    var cardExpiryElement = elements.create('cardExpiry', {
        style: elementStyles,
        classes: elementClasses,
        placeholder: "AY / YIL"
    });
    cardExpiryElement.mount("#ccExpiry-container");
    var cardCvcElement = elements.create('cardCvc', {
        style: elementStyles,
        classes: elementClasses,
    });
    cardCvcElement.mount("#ccCvc-container");

    return {
        stripe: stripe,
        card: {
            number: cardNumberElement,
            exp_month: "07",
            exp_year: "20",
            cvc: cardCvcElement,
        },
        clientSecret: data.clientSecret
    };
};

var pay = function(stripe, card, clientSecret) {
    changeLoadingState(true);

    // Initiate the payment.
    // If authentication is required, confirmCardPayment will automatically display a modal
    stripe.confirmCardPayment(clientSecret, {
        payment_method: {
            card: card,
            billing_details:{
                name: "Kemal Dursun",
            }
        }
    })
    .then(function(result) {
        if (result.error) {
            // Show error to your customer
            showError(result.error.message);
        } else {
            // The payment has been processed!
            orderComplete(clientSecret);
        }
    });
};

var orderComplete = function(clientSecret) {
    // Just for the purpose of the sample, show the PaymentIntent response object
    stripe.retrievePaymentIntent(clientSecret).then(function(result) {
        var paymentIntent = result.paymentIntent;
        var paymentIntentJson = JSON.stringify(paymentIntent, null, 2);

        console.log(paymentIntentJson);

        changeLoadingState(false);
        Alert("fas fa-check", "Tebrikler!", "Ödemeniz başarıyla tamamlandı!");
    });
};

var showError = function(errorMsgText) {
    console.log(errorMsgText);
};

// Show a spinner on payment submission
var changeLoadingState = function(isLoading) {
    if (isLoading) {
        Wait("Lütfen bekleyin...");
    } else {
        Go();
    }
};