var cardIframeEl = document.getElementById('card_iframe'),
    wtIframeEl = document.getElementById('wt_iframe'),
    first_name = document.getElementById('first_name'),
    last_name = document.getElementById('last_name'),
    form = document.getElementById('frmOrder'),
    multiStep2 = document.querySelector('#multi-step a[href="#step2"]'),
    processingModal = $('#processingModal');

bindEvent(actionButton, 'click', function () {
    if (typeof dummy_page !== "undefined" && dummy_page === 0) {
        processingModal.modal();

        $('#frmOrder').find('.pk_section__notification').remove();

        if (!hasClass(actionButton, 'disabled')) {
            var correctIframe = correctFrame();

            if (correctIframe) {
                addClass(actionButton, ['disabled', 'loading']);
                sendMessage({
                    code: 4, // means query from PK checkout page
                    encodedString: encodedFormData()
                }, correctIframe.contentWindow);
            } else {
                if (isNotIframe()) {
                    if ($(form).valid()) {
                        setTimeout(function () {
                            addReCaptchaTokenIfEnabled(form, function () {
                                form.submit();
                            });
                        }, 1000);
                    } else {
                        processingModal.modal('hide');
                        removeClass(actionButton, ['disabled', 'loading']);
                    }
                } else {
                    if (is3DSEnabled()) {
                        if ($(form).valid()) {
                            var braintreeClientTokenInput = $('#braintreeClientToken'),
                                stripeKey = $('#stripeKey'),
                                gateway = $('#gateway-name').data('value'),
                                finixEnv = $('#finix_env').data('value'),
                                finixPubKey = $('#finix_publish_key').data('value'),
                                finixMerchantId = $('#finix_merchant_id').data('value');

                            if (braintreeClientTokenInput.length && gateway === 'braintree') {
                                braintree3DSProcess();
                            } else if (stripeKey.length && gateway === 'stripe') {
                                stripe3DSProcess();
                            } else if (gateway === 'epd') {
                                if ($('#card-element .invalid').length > 0) {
                                    $('#processingModal').modal('hide');
                                }
                            } else if (gateway === 'connect') {
                                connectIframeProcess();
                            } else if (gateway === 'checkout') {
                                checkoutProcess();
                            } else if (gateway === 'finix') {
                                finixProcess(finixEnv, finixPubKey, finixMerchantId);
                            } else {
                                finalize({});
                            }
                        } else {
                            processingModal.modal('hide');
                        }
                    }
                }
            }
        } else {
            processingModal.modal('hide');
        }
    }
});

bindEvent(first_name, 'keyup', function () {
    sendCardHolderName();
});

bindEvent(last_name, 'keyup', function () {
    sendCardHolderName();
});

window.onload = function () {
    askIframeHeight();
    setIframesHeight();

    if (is3DSEnabled()) {
        var braintreeClientTokenInput = $('#braintreeClientToken'),
            stripeKey = $('#stripeKey'),
            connectAppId = $('#appId'),
            gateway = $('#gateway-name').data('value');

        if (braintreeClientTokenInput.length) {
            braintree3DSInit(braintreeClientTokenInput.data('value'));
        } else if (stripeKey.length) {
            stripe3DSInit(stripeKey.data('value'));
        } else if (gateway === 'epd') {
            // Do nothing
        } else if (gateway === 'finix') {
            finixInit()
        } else if (connectAppId.length) {
            connectIframeInit();
        }
    }
};

bindEvent(window, 'message', function (e) {
    var correctIframe = correctFrame(),
        data = e.data;

    if (correctIframe) {
        var $form = $('#frmOrder');
        if (data.hasOwnProperty('code') && data.code !== 200) {
            processingModal.modal('hide');
            removeClass(actionButton, ['disabled', 'loading']);
            sendMessage({
                code: 4, // means when click on buy now btn
                function: "removeClass",
                iframeId: correctIframe.getAttribute('id')
            }, correctIframe.contentWindow);

            if (data.code === 4001) { // 4001 - validation error
                sendMessage({
                    code: 4, // means when click on buy now btn
                    function: "inputValidationError",
                    ids: data.ids,
                    message: validateErrorMessage(),
                    iframeId: correctIframe.getAttribute('id')
                }, correctIframe.contentWindow);

                if (multiStep2) {
                    multiStep2.click();
                }
                $form.valid();
            }

            if (data.code === 400) { // 400 - internal Gateway error
                showCheckoutPageError(data.message);
            }
        } else if (data.hasOwnProperty('function')) {
            processingModal.modal('hide');
            window[data.function](e);
        } else {
            if (data.code === 200) {
                finalize(data.response, function () {
                    sendMessage({
                        code: 4, // means when click on buy now btn
                        function: "removeClass",
                        iframeId: correctIframe.getAttribute('id')
                    }, correctIframe.contentWindow);
                });
            }
        }
    } else {
        if (data.function) {
            window[data.function](e);
        }
    }
});

function finalize(formObject, cb) {
    var $form = $('#frmOrder');

    for (var prop in formObject) {
        if (formObject.hasOwnProperty(prop) && formObject[prop]) {
            var input = document.createElement("input");
            input.setAttribute("type", "hidden");
            input.setAttribute("value", formObject[prop]);
            input.setAttribute("name", prop);
            input.setAttribute("readonly", "readonly");
            form.appendChild(input)
        }
    }

    if ($form.valid()) {
        setTimeout(function () {
            addReCaptchaTokenIfEnabled(form, function () {
                form.submit();
            });
        }, 1000);
    } else {
        processingModal.modal('hide');
        removeClass(actionButton, ['disabled', 'loading']);
        if (cb) {
            cb();
        }
    }
}

function addReCaptchaTokenIfEnabled(form, cb) {
    if ($('body').data('is-recaptcha_enabled')) {
        grecaptcha
            .execute(CAPTCHA_SITE_KEY, {action: 'checkout'})
            .then(function (token) {
                var input = document.createElement("input");
                input.setAttribute("type", "hidden");
                input.setAttribute("value", token);
                input.setAttribute("name", 'g-recaptcha-response');
                input.setAttribute("readonly", "readonly");
                form.appendChild(input);

                cb();
            });
    } else {
        cb();
    }
}

/**
 * Change IFRAME height after child JS response
 *
 * @param event
 */
function resizeIframe(event) {
    var element = document.getElementById(event.data.data.id);

    if (element) {
        setTimeout(function () {
            element.style.height = event.data.data.height + "px";
        }, 100);
    }
}

/**
 * Redirect to 404 if something extremely bad happens during render iframe form
 */
function redirect404() {
    window.location = BASE_URL + '/pci/404';
}


/**
 * Join parent form array with & and encode to base_64
 *
 * @returns {string}
 */
function encodedFormData() {
    return btoa(formDataString());
}

/**
 * Join parent form array with & to the string
 *
 * @returns {string}
 */
function formDataString() {
    return formDataObject().join("&");
}

/**
 * Build key => values array with data from PARENT form
 *
 * @returns {Array}
 */
function formDataObject() {
    var form = document.getElementById('frmOrder');
    var kvpairs = [];
    for (var i = 0; i < form.elements.length; i++) {
        var e = form.elements[i];
        if (false === e.disabled && e.name !== '' && null === e.getAttribute('skip-iframe')) {
            kvpairs.push(encodeURIComponent(e.name) + "=" + encodeURIComponent(e.value));
        }
    }
    let gatewayName = $('#gateway-name').data('value');
    kvpairs.push('gateway=' + gatewayName);
    if (gatewayName === 'stripe') {
        let stripeKey = $('#stripeKey');
        if (stripeKey.length) {
            kvpairs.push('stripeKey=' + stripeKey.data('value'));
        }

        let stripeWTPubKey = $('#stripeWTPubKey');
        if (stripeWTPubKey.length) {
            kvpairs.push('stripeWTPubKey=' + stripeWTPubKey.data('value'));
        }
    }

    if (gatewayName === 'authnet') {
        let clientKey = $('#clientKey');
        if (clientKey.length) {
            kvpairs.push('clientKey=' + clientKey.data('value'));
        }

        let apiLoginId = $('#apiLoginId');
        if (apiLoginId.length) {
            kvpairs.push('apiLoginId=' + apiLoginId.data('value'));
        }
    }

    if (gatewayName === 'braintree') {
        let braintreeClientToken = $('#braintreeClientToken');
        if (braintreeClientToken.length) {
            kvpairs.push('braintreeClientToken=' + braintreeClientToken.data('value'));
        }
    }

    if (gatewayName === 'connect') {
        let appId = $('#appId');
        if (appId.length) {
            kvpairs.push('appId=' + appId.data('value'));
        }

        let apiVersion = $('#apiVersion');
        if (apiVersion.length) {
            kvpairs.push('apiVersion=' + apiVersion.data('value'));
        }

        let env = $('#env');
        if (env.length) {
            kvpairs.push('env=' + env.data('value'));
        }
    }

    return kvpairs;
}

/**
 * Send an holder name to IFRAME holder name input field to correct(visible) iframe
 */
function sendCardHolderName() {
    var correctIframe = correctFrame();

    if (correctIframe) {
        sendMessage({
            code: 4, // means query from PK checkout page
            function: "setCardHolderName",
            data: {
                first_name: first_name.value,
                last_name: last_name.value,
                iframeId: correctIframe.getAttribute('id')
            }
        }, correctIframe.contentWindow);
    }
}

/**
 * Ask what iframe height should be, via sending a message
 */
function askIframeHeight(iframe) {
    var correctIframe = iframe || correctFrame();

    if (correctIframe) {
        sendMessage({
            code: 4, // means query from PK checkout page
            function: "getIframeHeight",
            data: {
                id: correctIframe.getAttribute('id')
            }
        }, correctIframe.contentWindow);
    }
}

/**
 * Retrieve current visible iframe html element
 *
 * @returns {HTMLElement|boolean}
 */
function correctFrame() {
    var gatewayType = document.getElementById('gateway-type');

    if (gatewayType && !isNotIframe()) {
        var gatewayTypeValue = gatewayType.value;

        if (gatewayTypeValue === 'wt') {
            return wtIframeEl;
        } else if (gatewayTypeValue === 'cc') {
            return cardIframeEl;
        }
    }

    return false;
}

/**
 * Set iframe height in background
 */
function setIframesHeight() {
    if (wtIframeEl && correctFrame() !== wtIframeEl) {
        askIframeHeight(wtIframeEl);
    }

    if (cardIframeEl && correctFrame() !== cardIframeEl) {
        askIframeHeight(cardIframeEl);
    }

    if (typeof resizeIframeEmbedForm !== "undefined") {
        resizeIframeEmbedForm();
    }
}

/**
 * Retrieve validation error message
 *
 * @param type
 * @returns {string}
 */
function validateErrorMessage(type) {
    var defaultMessage = 'This field is required.';
    try {
        var message = $.validator.messages[type || 'required'];

        return (typeof message === 'string') ? message : defaultMessage;
    } catch (e) {
        return defaultMessage;
    } finally {
        window.onerror = function () {
            return defaultMessage;
        }
    }
}

/**
 *
 * @returns {boolean}
 */
function isNotIframe() {
    var gateway = $('#gateway-name'),
        freeGateways = ['free', 'freetrial', 'testmode', 'offline', 'paypaladaptive'];

    return freeGateways.indexOf(gateway.data('value')) > -1;
}

/**
 * Display error message
 * @param errorMessage
 * @param {function()} cb
 */
function showCheckoutPageError(errorMessage, cb) {
    if (errorMessage === 'Parameter failed UI validation.') {
        errorMessage = 'Custom validation error message';
    }
    processingModal.modal('hide');
    $('#frmOrder').append('<div class="pk_section__notification pk-general-error"><div class="alert alert-error alert-dismissible" role="alert"><p>' + errorMessage + '</p><button aria-label="Close" class="btn btn-primary" data-dismiss="alert" type="button"><i class="fa fa fa-check-circle"></i> OK</button></div></div>');

    if (cb) {
        cb();
    }
}

function is3DSEnabled() {
    return !!$('body').data('enable-3ds');
}

function getIntentOption(amount, currency) {
    let a = parseInt(amount * 100);

    if (currency === undefined) {
        currency = $('body').data('active-currency');
        if (currency === undefined) {
            currency = 'usd';
        }
    }

    if (a === 0) {
        return {
            mode: 'setup'
        };
    } else {
        return {
            mode: 'payment',
            amount: a,
            currency: currency.toLowerCase(),
            setup_future_usage: 'off_session',
            capture_method: 'automatic',
        };
    }
}