export let card;
export let stripe;
const cardMessages = document.getElementById("card-messages");
const payButton = document.getElementById("pay-button");
export const processing = document.getElementById("processing-payment");

export function hidePayButton() {
    payButton.classList.add("d-none");
    processing.classList.remove("d-none");
}

export function showPayButton() {
    payButton.classList.remove("d-none");
    processing.classList.add("d-none");
}

export function showCardError(msg) {
    cardMessages.classList.add("alert-danger");
    cardMessages.classList.remove("alert-success");
    cardMessages.classList.remove("d-none");
    cardMessages.innerText = msg;
}

export function showCardSuccess() {
    cardMessages.classList.add("alert-success");
    cardMessages.classList.remove("alert-danger");
    cardMessages.classList.remove("d-none");
    cardMessages.innerText = "Trasaction successful";
}

export function stripeInit(pubKey) {
    stripe = Stripe(pubKey);

    (function () {
        // create stripe & elements
        const elements = stripe.elements();
        const style = {
            base: {
                fontSize: '16px',
                lineHeight: '24px',
            }
        };

        // create card entry
        card = elements.create('card', {
            style: style,
            hidePostalCode: true,
        });
        card.mount("#card-element");

        // check for input errors
        card.addEventListener('change', function (event) {
            var displayError = document.getElementById("card-errors");
            if (event.error) {
                displayError.classList.remove('d-none');
                displayError.textContent = event.error.message;
            } else {
                displayError.classList.add('d-none');
                displayError.textContent = "";
            }
        });
    })();
}