(function () {
    "use strict";
    var streamApp = angular.module('streamApp');

    streamApp.directive('cardDirective', ['accountService', '$routeParams', '$location', CardDirective]);

    function CardDirective(accountService, $routeParams, $location) {
        return {
            restrict: 'E',
            scope: {
                callBack: '='
            },
            templateUrl: '/App/Directives/cardDirective/cardDirective.html?v=6.0.0c',
            link: function (scope, element, attrs, tabsCtrl) {
                scope.loginKey = function (keyEvent) {
                    if (keyEvent.which === 13) console.log("press");
                };

                //var stripe = Stripe('pk_live_DB7yUr4XRIx4vAgAdj0v4ywd');
                var stripe = Stripe('pk_test_VjQhcLXqRYqQwbCiLGKbeyUD');
                // Create an instance of Elements.
                var elements = stripe.elements();

                // Custom styling can be passed to options when creating an Element.
                var style = {
                    base: {
                        color: '#32325d',
                        fontFamily: '"Helvetica Neue", Helvetica, sans-serif',
                        fontSmoothing: 'antialiased',
                        fontSize: '22px',
                        '::placeholder': {
                            color: '#aab7c4'
                        }
                    },
                    invalid: {
                        color: '#fa755a',
                        iconColor: '#fa755a'
                    }
                };

                // Create an instance of the card Element.
                var card = elements.create('card', { style: style });

                // Add an instance of the card Element into the `card-element` <div>.
                card.mount('#card-element');

                // Handle real-time validation errors from the card Element.
                card.addEventListener('change', function (event) {
                    var displayError = document.getElementById('card-errors');
                    if (event.error) {
                        displayError.textContent = event.error.message;
                    } else {
                        displayError.textContent = '';
                    }
                });
                let once = true;
                // Handle form submission.
                var form = document.getElementById('payment-form');
                form.addEventListener('submit', function (event) {
                    event.preventDefault();
                    scope.errorMessage = '';
                    if (once) {
                        $('.waiting').show();
                        once = false;
                        stripe.createToken(card).then(function (result) {
                            if (result.error) {
                                $('.waiting').hide();
                                // Inform the user if there was an error.
                                var errorElement = document.getElementById('card-errors');
                                errorElement.textContent = result.error.message;
                                once = true;
                            } else {
                                // Send the token to your server.
                                stripeTokenHandler(result.token);
                            }
                        });
                    }
                });

                // Submit the form with the token ID.
                function stripeTokenHandler(token) {
                    accountService.upgradePlan(token.id).then(() => {
                        scope.callBack();
                        $('.waiting').hide();
                    }).catch(error => {
                        scope.errorMessage = error.data;
                        once = true;
                        $('.waiting').hide();
                    });
                }
              
            }
        };
    }

}());