"use strict";
var Bridgepay = /** @class */ (function () {
    function Bridgepay(_a) {
        var _this = this;
        var clientKey = _a.clientKey, createOrder = _a.createOrder, onError = _a.onError, onEvent = _a.onEvent, onSuccess = _a.onSuccess;
        this.actions = function (clientKey) { return ({
            order: {
                create: function (orderOptions) {
                    _this.openIframe(orderOptions, clientKey);
                },
            },
            instance: {
                close: function () {
                    _this.close();
                },
            },
        }); };
        this.clientKey = clientKey;
        this.onEvent = onEvent;
        this.onSuccess = onSuccess;
        this.onError = onError;
        this.createOrder = createOrder;
        window.addEventListener("message", function (event) {
            if (event.origin !== "https://app.bridgement.com") {
                return;
            }
            // if (event.origin !== "http://localhost:4200") {
            // 	return;
            // }
            if (event.data.type === 0) {
                if (_this.onSuccess) {
                    _this.onSuccess(event.data, _this.actions(_this.clientKey));
                }
            }
            else if (event.data.type === 99) {
                if (_this.onError) {
                    _this.onError(event.data, _this.actions(_this.clientKey));
                }
            }
            else {
                if (_this.onEvent) {
                    _this.onEvent(event.data, _this.actions(_this.clientKey));
                }
            }
            _this.close();
        });
        var style = document.createElement("style");
        style.innerHTML = "\n\t\t\t\t.bridgepay-modal-box {\n\t\t\t\t\topacity: 0.5;\n\t\t\t\t\tbackground-color: rgb(0, 0, 0);\n\t\t\t\t\ttransition: opacity 500ms;\n\t\t\t\t\twill-change: opacity;\n\t\t\t\t}\n\t\n\t\t\t\t.bridgepay-modal-box.faded-out {\n\t\t\t\t\topacity: 0;\n\t\t\t\t}\n\t\n\t\t\t\t.bridgepay-container-box {\n\t\t\t\t\tbackground-color: #ffffff;\n\t\t\t\t\ttransition: width 500ms;\n\t\t\t\t\twill-change: width;\n\t\t\t\t\twidth: 40%;\n\t\t\t\t}\n\t\n\t\t\t\t.bridgepay-container-box.faded-out {\n\t\t\t\t\twidth: 0%;\n\t\t\t\t}\n\t\n\t\t\t\t@media only screen and (max-width: 600px) {\n\t\t\t\t\t.bridgepay-container-box {\n\t\t\t\t\t\twidth: 100%;\n\t\t\t\t\t}\n\t\t\t\t}\n\t\n\t\t\t\t@media only screen and (min-width: 600px) {\n\t\t\t\t\t.bridgepay-container-box {\n\t\t\t\t\t\twidth: 50%;\n\t\t\t\t\t}\n\t\t\t\t}\n\t\n\t\t\t\t@media only screen and (min-width: 768px) {\n\t\t\t\t\t.bridgepay-container-box {\n\t\t\t\t\t\twidth: 50%;\n\t\t\t\t\t}\n\t\t\t\t}\n\t\n\t\t\t\t@media only screen and (min-width: 992px) {\n\t\t\t\t\t.bridgepay-container-box {\n\t\t\t\t\t\twidth: 40%;\n\t\t\t\t\t}\n\t\t\t\t}\n\t\n\t\t\t\t@media only screen and (min-width: 1200px) {\n\t\t\t\t\t.bridgepay-container-box {\n\t\t\t\t\t\twidth: 30%;\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t";
        document.head.appendChild(style);
    }
    Bridgepay.prototype.open = function () {
        this.createOrder({}, this.actions(this.clientKey));
    };
    Bridgepay.prototype.close = function () {
        var _a, _b;
        var iframe = document.getElementById("bridgepay-iframe-container");
        var modal = document.getElementById("bridgepay-background-modal");
        if (iframe) {
            (_a = document
                .getElementById("bridgepay-payment-container")) === null || _a === void 0 ? void 0 : _a.removeChild(iframe);
        }
        if (modal) {
            (_b = document
                .getElementById("bridgepay-payment-container")) === null || _b === void 0 ? void 0 : _b.removeChild(modal);
        }
    };
    Bridgepay.prototype.openIframe = function (orderOptions, clientKey) {
        var divContainer = document.getElementById("bridgepay-payment-container");
        if (!divContainer) {
            divContainer = document.createElement("div");
            divContainer.id = "bridgepay-payment-container";
        }
        var container = document.createElement("div");
        container.style.position = "fixed";
        container.style.right = "0px";
        container.style.top = "0px";
        container.style.height = "100%";
        container.style.zIndex = "9999999999";
        container.id = "bridgepay-iframe-container";
        var iframe = document.createElement("iframe");
        // iframe.src = `http://localhost:4200/connect/bridgepay/?orderRef=${orderOptions.orderReference}&amount=${orderOptions.orderAmount}&host=${window.location.origin}&clientKey=${clientKey}`;
        iframe.src = "https://app.bridgement.com/connect/bridgepay/?orderRef=" + orderOptions.orderReference + "&amount=" + orderOptions.orderAmount + "&host=" + window.location.origin + "&clientKey=" + clientKey;
        iframe.style.width = "100%";
        iframe.style.height = "100%";
        iframe.style.border = "none";
        var background = document.createElement("div");
        background.id = "bridgepay-background-modal";
        background.style.height = "100vh";
        background.style.width = "100vw";
        background.style.position = "fixed";
        background.style.left = "0px";
        background.style.top = "0px";
        background.style.zIndex = "99999999";
        background.onclick = this.close;
        container.appendChild(iframe);
        divContainer.appendChild(container);
        divContainer.appendChild(background);
        background.classList.add("bridgepay-modal-box", "faded-out");
        container.classList.add("bridgepay-container-box", "faded-out");
        requestAnimationFrame(function () {
            setTimeout(function () {
                background.classList.remove("faded-out");
                container.classList.remove("faded-out");
            }, 500);
        });
    };
    return Bridgepay;
}());