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

export let pageSize = 2;

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 showError(element, msg) {
    const messages = document.getElementById(element);
    messages.classList.add("alert-danger");
    messages.classList.remove("alert-success");
    messages.classList.remove("d-none");
    messages.innerText = msg;
}

export function showSuccess(element, msg) {
    const messages = document.getElementById(element);
    messages.classList.add("alert-success");
    messages.classList.remove("alert-danger");
    messages.classList.remove("d-none");
    messages.innerText = msg;
}

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 = "";
            }
        });
    })();
}

export function checkAuth(api) {
    if (localStorage.getItem("token") === null) {
        location.href = "/login";
        return
    } else {
        let token = localStorage.getItem("token")
        const myHeaders = new Headers();
        myHeaders.append("Content-Type", "application/json");
        myHeaders.append("Authorization", "Bearer " + token);

        const requestOptions = {
            method: "POST",
            headers: myHeaders,
        }

        fetch(api + "/api/is-authenticated", requestOptions)
        .then(response => response.json())
            .then(function(data) {
                if (data.ok === false) {
                    console.log("not logged in");
                    location.href = "/login"
                } else {
                    console.log("Logged in");
                }
            })
    }
}

export function formatCurrency(amount) {
    let c = parseFloat(amount/100);
    return c.toLocaleString("fr-FR", {
        style:"currency",
        currency: "EUR",
    });
}

export function paginator(api, pages, curPage, showTable) {
    // Check the border case
    if (curPage >= pages) {
        curPage = pages
    }

    const p = document.getElementById("paginator")
    let html = `<li class="page-item"><a href="#!" class="page-link pager" data-page="${curPage - 1}">&lt;</a></li>`;

    for (var i = 0; i < pages; i++) {
        if (i + 1 == curPage) {
            html += `<li class="page-item"><a href="#!" class="page-link pager active" data-page="${i + 1}">${i + 1}</a></li>`;

        } else {

            html += `<li class="page-item"><a href="#!" class="page-link pager" data-page="${i + 1}">${i + 1}</a></li>`;
        }
    }

    html += `<li class="page-item"><a href="#!" class="page-link pager" data-page="${curPage + 1}">&gt;</a></li>`;

    p.innerHTML = html;

    let pageBtns = document.getElementsByClassName("pager");
    for (var j = 0; j < pageBtns.length; j++) {
        pageBtns[j].addEventListener("click", function (evt) {
            let desiredPage = evt.target.getAttribute("data-page");
            if ((desiredPage > 0) && (desiredPage <= pages)) {
                console.log("would go to page", desiredPage);
                showTable(api, pageSize, desiredPage);
            }
        })
    }
}