var stripe_metadata = null;

var bindformStripe = function () {
    var stripe = Stripe('');
    var elements = stripe.elements();

    var card = elements.create('card', {});
    var errorElement = document.getElementById('errors');
    var form = document.getElementById('payment-form');

    card.mount('#card-element');

    card.addEventListener('change', function (event) {
        if (event.error) {
            errorElement.textContent = event.error.message;
        } else {
            errorElement.textContent = '';
        }
    });

    form.addEventListener('submit', function (event) {
        event.preventDefault();
        document.getElementById('btnSubmit').setAttribute('disabled', 'disabled');
        $("#btnSubmit").val("Traitement en cours ...")

        var sourceOptions = {
            amount: parseInt(parseFloat($("#amount").val()) * 100),
            currency: $("#currency").val().toLowerCase(),
            owner: {
                name: $("#nom").val().toUpperCase() + " " + $("#prenom").val().toLowerCase(),
                email: $("#email").val().toLowerCase()
            },
            metadata: {
                from: $("#from").val(),
                id: $("#id").val(),
                base: ($("#base").val() === undefined ? "" : $("#base").val()),
                combo: ($("#combo").val() === undefined ? "" : $("#combo").val())
            }
        }

		stripe_metadata = sourceOptions.metadata;

        stripe.createSource(card, sourceOptions).then(function (result) {
            if (result.error) {
                errorElement.textContent = result.error.message;
                document.getElementById('btnSubmit').removeAttribute("disabled");
                $("#btnSubmit").val("Payer")
            } else {
                stripeSourceHandler(result.source);
            }
        });
    });

    function stripeSourceHandler(source) {
        var hiddenInputSrc = document.createElement('input');
        hiddenInputSrc.setAttribute('type', 'hidden');
        hiddenInputSrc.setAttribute('name', 'source');
        hiddenInputSrc.setAttribute('value', source.id);
        form.appendChild(hiddenInputSrc);

        var hiddenInputClientSecret = document.createElement('input');
        hiddenInputClientSecret.setAttribute('type', 'hidden');
        hiddenInputClientSecret.setAttribute('name', 'client_secret');
        hiddenInputClientSecret.setAttribute('value', source.client_secret);
        form.appendChild(hiddenInputClientSecret);

        if (source.card.three_d_secure === 'required' || source.card.three_d_secure === 'optional') {
            stripe.createSource({
                type: 'three_d_secure',
                amount: source.amount,
                currency: source.currency,
                three_d_secure: {
                    card: source.id
                },
                redirect: {
                    return_url: "https://es.ansil.org" + form.getAttribute("action")
                },
                metadata: stripe_metadata,
                owner: source.owner
            }).then(function (result) {
                if (result.error) {
                    form.submit();
                } else {
                    if (result.source.status === "failed") {
                        form.submit();
                    } else if (result.source.status === "pending" || result.source.status === "chargeable") {
                        window.location = result.source.redirect.url;
                    } else {
                        form.submit();
                    }
                }
            });
        } else {
            form.submit();
        }
    }
};