import { p as proxyCustomElement, H, h, f as forceUpdate } from './p-3b962989.js';
import { D as DataTestIdsEnum } from './p-6e09b0ac.js';
import { a as LedgerConnectEventsEnum, L as LedgerConnectBase } from './p-0d9caba2.js';
import { d as defineCustomElement$6 } from './p-499bc1e6.js';
import { d as defineCustomElement$5 } from './p-e9dd5f80.js';
import { d as defineCustomElement$4 } from './p-f27a8a5d.js';
import { d as defineCustomElement$3 } from './p-a9c27a41.js';
import { d as defineCustomElement$2 } from './p-4a997c1b.js';

const LedgerConnectModal$1 = /*@__PURE__*/ proxyCustomElement(class LedgerConnectModal extends H {
    constructor() {
        super();
        this.__registerHost();
        this.__attachShadow();
        this.data = {
            accountScreenData: null,
            confirmScreenData: null,
            connectScreenData: {},
        };
        this.selectedIndex = 0;
        this.getModalProps = () => {
            const { accountScreenData, confirmScreenData, connectScreenData } = this.data;
            if (accountScreenData) {
                return {
                    modalTitle: h("div", { "data-testid": `${DataTestIdsEnum.addressTableContainer}Title` }, "Access your wallet"),
                    modalSubtitle: h("div", { "data-testid": `${DataTestIdsEnum.addressTableContainer}SubTitle` }, "Choose the wallet you want to access"),
                    body: (h("ledger-account-screen", { accountScreenData: accountScreenData, selectedIndex: this.selectedIndex, onSelectAccount: (event) => this.selectAccount(event.detail), onAccessWallet: () => this.accessWallet(), onPrevPage: () => this.prevPage(), onNextPage: () => this.nextPage() })),
                };
            }
            if (confirmScreenData) {
                return {
                    modalTitle: 'Confirm',
                    modalSubtitle: 'Confirm Ledger Address',
                    body: h("ledger-confirm-screen", { confirmScreenData: confirmScreenData }),
                };
            }
            return {
                modalTitle: 'Connect Ledger',
                modalSubtitle: 'Unlock your device & open the MultiversX App',
                body: h("ledger-connect-screen", { connectScreenData: connectScreenData, onConnect: () => this.ledgerConnectBase.eventBus.publish(LedgerConnectEventsEnum.CONNECT_DEVICE) }),
            };
        };
    }
    componentWillLoad() {
        this.ledgerConnectBase = new LedgerConnectBase(this.data);
    }
    async getEventBus() {
        return this.ledgerConnectBase.getEventBus();
    }
    render() {
        const modalProps = this.getModalProps();
        return h("generic-modal", Object.assign({ key: 'd01d92ca0fcc5501f254543498ab565ce2007361' }, modalProps, { onClose: () => this.close() }));
    }
    accessWallet() {
        this.ledgerConnectBase.accessWallet();
    }
    selectAccount(index) {
        this.ledgerConnectBase.selectAccount(index);
        // this is needed for the UI to be reactive
        this.selectedIndex = this.ledgerConnectBase.selectedIndex;
    }
    async nextPage() {
        this.ledgerConnectBase.nextPage();
    }
    async prevPage() {
        this.ledgerConnectBase.prevPage();
    }
    close(props = { isUserClick: true }) {
        var _a;
        if (props.isUserClick) {
            this.ledgerConnectBase.eventBus.publish(LedgerConnectEventsEnum.CLOSE);
        }
        if ((_a = this.hostElement) === null || _a === void 0 ? void 0 : _a.parentNode) {
            this.hostElement.parentNode.removeChild(this.hostElement);
        }
    }
    componentDidLoad() {
        this.ledgerConnectBase.subscribeEventBus({
            closeFn: () => this.close({ isUserClick: false }),
            forceUpdateFn: () => {
                // this is needed for the UI to be reactive
                this.data = this.ledgerConnectBase.data;
                forceUpdate(this);
            },
        });
    }
    disconnectedCallback() {
        this.ledgerConnectBase.unsubscribeEventBus({
            closeFn: () => this.close({ isUserClick: false }),
            forceUpdateFn: () => {
                // this is needed for the UI to be reactive
                this.data = this.ledgerConnectBase.data;
                forceUpdate(this);
            },
        });
    }
    get hostElement() { return this; }
}, [1, "ledger-connect-modal", {
        "data": [16],
        "selectedIndex": [32],
        "getEventBus": [64]
    }]);
function defineCustomElement$1() {
    if (typeof customElements === "undefined") {
        return;
    }
    const components = ["ledger-connect-modal", "generic-modal", "generic-spinner", "ledger-account-screen", "ledger-confirm-screen", "ledger-connect-screen"];
    components.forEach(tagName => { switch (tagName) {
        case "ledger-connect-modal":
            if (!customElements.get(tagName)) {
                customElements.define(tagName, LedgerConnectModal$1);
            }
            break;
        case "generic-modal":
            if (!customElements.get(tagName)) {
                defineCustomElement$6();
            }
            break;
        case "generic-spinner":
            if (!customElements.get(tagName)) {
                defineCustomElement$5();
            }
            break;
        case "ledger-account-screen":
            if (!customElements.get(tagName)) {
                defineCustomElement$4();
            }
            break;
        case "ledger-confirm-screen":
            if (!customElements.get(tagName)) {
                defineCustomElement$3();
            }
            break;
        case "ledger-connect-screen":
            if (!customElements.get(tagName)) {
                defineCustomElement$2();
            }
            break;
    } });
}

const LedgerConnectModal = LedgerConnectModal$1;
const defineCustomElement = defineCustomElement$1;

export { LedgerConnectModal, defineCustomElement };

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