import Loader from "./Loader";

class StripeForm {
    constructor() {
        const self = this;
        this.cardButton = document.getElementById('stripe-submit-button');
        const stripeKey = process.env.MIX_STRIPE_KEY;

        if (this.cardButton) {
            const stripe = Stripe(this.cardButton.dataset.stripeKey);

            const elements = stripe.elements();

            // const cardElement = elements.create('card');
            // cardElement.mount('#card-element');

            let elementStyles = {
                base: {
                    // color: '#32325d',
                    // fontFamily: '"Helvetica Neue", Helvetica, sans-serif',
                    fontSmoothing: 'antialiased',
                    fontSize: '16px',
                    // '::placeholder': {
                    //     color: '#aab7c4'
                    // }
                },
                // invalid: {
                //     color: '#fa755a',
                //     iconColor: '#fa755a'
                // }
            };

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

            var cardNumber = elements.create('cardNumber', {
                style: elementStyles,
                classes: elementClasses,
            });
            cardNumber.mount('#card-number');

            var cardExpiry = elements.create('cardExpiry', {
                style: elementStyles,
                classes: elementClasses,
            });
            cardExpiry.mount('#card-expiry');

            var cardCvc = elements.create('cardCvc', {
                style: elementStyles,
                classes: elementClasses,
            });
            cardCvc.mount('#card-cvc');

            const cardHolderName = document.getElementById('card-holder-name');

            this.cardButton.addEventListener('click', async (e) => {
                this.cardButton.disabled = true;
                if (!cardHolderName.value) {
                    alert("The Card holder name field is required!");
                    return false;
                }
                Loader.loading();

                // var el = elements.getElement('cardNumber');
                // console.log(el);
                var cardElement = {
                    exp_month: '',
                    exp_year: '',
                    number: '',
                    cvc: '',
                };
                // console.log(cardElement);
                const {paymentMethod, error} = await stripe.createPaymentMethod(
                    'card', cardNumber, {
                        billing_details: {name: cardHolderName.value}
                    }
                );

                if (error) {
                    // Display "error.message" to the user...
                    console.log(error);
                    Loader.loading(false);
                    alert(error.message);
                    this.cardButton.disabled = false;
                } else {
                    var paymentMethodInput = document.getElementById('paymentMethod');
                    paymentMethodInput.value = JSON.stringify(paymentMethod);
                    this.cardButton.form.submit();
                    // The card has been verified successfully...
                }
            });
        }
    }

    checkReady() {
        console.log('Stripe elements mounted');
    }
}

export default StripeForm;