import { p as proxyCustomElement, H, h, f as forceUpdate } from './p-3b962989.js';
import { D as DataTestIdsEnum } from './p-6e09b0ac.js';
import { W as WalletConnectBase, a as WalletConnectEventsEnum } from './p-a9480301.js';
import { d as defineCustomElement$4 } from './p-499bc1e6.js';
import { d as defineCustomElement$3 } from './p-e9dd5f80.js';
import { d as defineCustomElement$2 } from './p-5419b643.js';

const WalletConnectModal$1 = /*@__PURE__*/ proxyCustomElement(class WalletConnectModal extends H {
    constructor() {
        super();
        this.__registerHost();
        this.__attachShadow();
        this.data = {
            wcURI: '',
        };
        this.qrCodeSvg = '';
    }
    componentWillLoad() {
        this.walletConnectBase = new WalletConnectBase(this.data);
    }
    async getEventBus() {
        return this.walletConnectBase.getEventBus();
    }
    async onDataChange(data) {
        if (data.wcURI) {
            this.qrCodeSvg = await this.walletConnectBase.generateSVG(data.wcURI);
        }
    }
    render() {
        return (h("generic-modal", { key: '556e1f83ac53f2e200aca1816f91f917bc455d3d', modalTitle: h("div", { "data-testid": DataTestIdsEnum.walletConnetModalTitle }, "xPortal Mobile Wallet"), modalSubtitle: h("div", { "data-testid": DataTestIdsEnum.walletConnetModalSubtitle }, "Scan this QR code with your app"), onClose: () => this.close(), body: h("wallet-connect-body", { qrCodeSvg: this.qrCodeSvg }) }));
    }
    close(props = { isUserClick: true }) {
        if (props.isUserClick) {
            this.walletConnectBase.eventBus.publish(WalletConnectEventsEnum.CLOSE);
        }
        if (this.hostElement && this.hostElement.parentNode) {
            this.hostElement.parentNode.removeChild(this.hostElement);
        }
    }
    componentDidLoad() {
        this.walletConnectBase.subscribeEventBus({
            closeFn: () => this.close({ isUserClick: false }),
            forceUpdateFn: () => {
                // this is needed for the UI to be reactive
                this.data = this.walletConnectBase.data;
                forceUpdate(this);
            },
        });
    }
    disconnectedCallback() {
        this.walletConnectBase.unsubscribeEventBus({
            closeFn: () => this.close({ isUserClick: false }),
            forceUpdateFn: () => {
                // this is needed for the UI to be reactive
                this.data = this.walletConnectBase.data;
                forceUpdate(this);
            },
        });
    }
    get hostElement() { return this; }
    static get watchers() { return {
        "data": ["onDataChange"]
    }; }
}, [1, "wallet-connect-modal", {
        "data": [16],
        "qrCodeSvg": [32],
        "getEventBus": [64]
    }, undefined, {
        "data": ["onDataChange"]
    }]);
function defineCustomElement$1() {
    if (typeof customElements === "undefined") {
        return;
    }
    const components = ["wallet-connect-modal", "generic-modal", "generic-spinner", "wallet-connect-body"];
    components.forEach(tagName => { switch (tagName) {
        case "wallet-connect-modal":
            if (!customElements.get(tagName)) {
                customElements.define(tagName, WalletConnectModal$1);
            }
            break;
        case "generic-modal":
            if (!customElements.get(tagName)) {
                defineCustomElement$4();
            }
            break;
        case "generic-spinner":
            if (!customElements.get(tagName)) {
                defineCustomElement$3();
            }
            break;
        case "wallet-connect-body":
            if (!customElements.get(tagName)) {
                defineCustomElement$2();
            }
            break;
    } });
}

const WalletConnectModal = WalletConnectModal$1;
const defineCustomElement = defineCustomElement$1;

export { WalletConnectModal, defineCustomElement };

//# sourceMappingURL=wallet-connect-modal.js.map