const bktECommerceQrBaseUri = "https://localhost:44332";
const bktECommerceQrPayment = "/QrPayment";
const bktPaymentResonseType = "PaymentResponse";

const isVisible = "is-visible";
const modalId = "bkt-qr-payment-modal";
const btnCloseModalId = "btn-close-bkt-qr-payment-modal";

//*********************************************** RENDER STYLES ******************************************************************//
const bktCssMarkup = `
.${modalId} {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.4);
    visibility: hidden;
    opacity: 0;
    transition: all 0.35s ease-in;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

.${modalId}.${isVisible} {
    visibility: visible;
    opacity: 1;
}

.bkt-qr-payment-modal-dialog {
    position: relative;
    max-width: 466px;
    max-height: 466px;
    border-radius: 5px;
    background: #ffffff;
    overflow: auto;
    cursor: default;
    width: 50%;
    min-width: 350px;
    min-height: 355px;
}

.bkt-qr-payment-modal-header {
    font-weight: 500;
    margin: 0;
    font-size: 1rem;
    padding-top: 1rem;
    padding-left: 1rem;
    padding-right: 1rem;
}

.bkt-qr-payment-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.bkt-qr-payment-modal-header .close {
    padding: 1rem;
    margin: -1rem -1rem -1rem auto;
    background-color: transparent;
    border: 0;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    float: right;
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1;
    color: #000000eb;
    text-shadow: 0 1px 0 #fff;
    opacity: .5;
    outline: none;
}
`;

const head = document.head || document.getElementsByTagName('head')[0];
const style = document.createElement('style');
const cssNode = document.createTextNode(bktCssMarkup);
style.appendChild(cssNode);
head.appendChild(style);
//************************************************* END RENDER STYLES ************************************************************//

//************************************************* RENDER HTML ******************************************************************//
const bktHtmlMarkup = `
<div class="bkt-qr-payment-modal" id="${modalId}">
    <div class="bkt-qr-payment-modal-dialog">

        <h5 class="bkt-qr-payment-modal-header">
            Scan Qr Code with your mobile to pay
            <button class="close" aria-label="close bkt-qr-payment-modal" id="${btnCloseModalId}">×</button>
        </h5>

        <iframe name="paymentIframe"
                id="iframe"
                src="${bktECommerceQrBaseUri}${bktECommerceQrPayment}"
                style="border:0px #ffffff none;padding-bottom: 1rem;"
                scrolling="no"
                frameborder="1"
                marginheight="0px"
                marginwidth="0px"
                height="350px"
                width="100%"
                allowfullscreen>
            Your browser does not support inline frames.
        </iframe>

    </div>
</div>
`;

document.body.innerHTML += bktHtmlMarkup;
//************************************************* END RENDER HTML **************************************************************//

const btnCloseBktQrPaymentModal = document.getElementById(btnCloseModalId);
const bktQrPaymentModal = document.getElementById(modalId);

const bktQrPayment = (request) => {
    let frame = document.getElementById('iframe').contentWindow;
    let data = {
        'for': 'bkt-qr-request',
        'request': request
    }
    frame.postMessage(data, bktECommerceQrBaseUri);
    bktQrPaymentModal.classList.add(isVisible);
}

btnCloseBktQrPaymentModal.addEventListener("click", function() {
    bktQrPaymentModal.classList.remove(isVisible);
});

document.addEventListener("keyup", e => {
    if (e.key == "Escape" && document.querySelector(`.${modalId}.${isVisible}`)) {
        document.querySelector(`.${modalId}.${isVisible}`).classList.remove(isVisible);
    }
});

//receive data from iframe
let eventMethod = window.addEventListener
    ? "addEventListener"
    : "attachEvent";

let eventer = window[eventMethod];

let messageEvent = eventMethod === "attachEvent"
    ? "onmessage"
    : "message";

eventer(messageEvent, function (e) {
    console.log('messageEvent: ', messageEvent);
    console.log('e: ', e);
    bktQrPaymentModal.classList.remove(isVisible);
    if (e.data["from"] === bktPaymentResonseType || e.message === bktPaymentResonseType) {
        // event trigged after BKT confirms the payment.
        if (e.data["isSuccess"] === true) {
            window.location.href = e.data["okUrl"];
        }
        else {
            window.location.href = e.data["failUrl"];
        }
    }
});