import { h, Fragment, forceUpdate } from "@stencil/core";
import { EventBus } from "../../utils/EventBus";
import { LedgerConnectEventsEnum } from "./ledger-connect-modal.types";
import { renderAccounts } from "./helpers/renderAccounts";
import { DataTestIdsEnum } from "../../constants/dataTestIds.enum";
export class LedgerConnectModal {
    constructor() {
        this.eventBus = new EventBus();
        this.data = {
            accountScreenData: null,
            confirmScreenData: null,
            connectScreenData: {},
        };
        this.selectedIndex = 0;
        this.selectedAddress = '';
    }
    async getEventBus() {
        return this.eventBus;
    }
    render() {
        const { accountScreenData, confirmScreenData, connectScreenData } = this.data;
        if (accountScreenData) {
            const isSelectedIndexOnPage = accountScreenData.accounts.some(({ index }) => index === this.selectedIndex);
            const accountsList = accountScreenData.isLoading || accountScreenData.accounts.length === 0 ? (h("generic-spinner", { "data-testid": DataTestIdsEnum.ledgerLoading })) : (renderAccounts({
                shownAccounts: accountScreenData.accounts,
                onSelectAccount: this.selectAccount.bind(this),
                selectedIndex: this.selectedIndex,
            }));
            return (h("generic-modal", { 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(Fragment, null, accountsList, !accountScreenData.isLoading && accountScreenData.accounts.length !== 0 && (h(Fragment, null, h("div", { class: "navigation" }, h("button", { onClick: () => this.prevPage(), disabled: accountScreenData.startIndex <= 0, "data-testid": DataTestIdsEnum.prevBtn, class: "navigation-button" }, '< ', " Prev"), h("button", { onClick: () => this.nextPage(), "data-testid": DataTestIdsEnum.nextBtn, class: "navigation-button" }, "Next", ' >')), h("button", { "data-testid": DataTestIdsEnum.confirmBtn, class: "access-button", onClick: () => this.accessWallet(), disabled: !isSelectedIndexOnPage }, "Access Wallet")))), onClose: () => this.close() }));
        }
        if (confirmScreenData) {
            return (h("generic-modal", { onClose: () => this.close(), modalTitle: "Confirm", modalSubtitle: "Confirm Ledger Address", body: h("div", { "data-testid": DataTestIdsEnum.ledgerConfirmAddress, class: "ledger-confirm-address-section" }, h("div", { class: "ledger-confirm-address-section" }, h("div", { class: "ledger-confirm-address-description" }, confirmScreenData.confirmAddressText), h("div", { class: "ledger-confirm-address-header" }, confirmScreenData.selectedAddress)), h("div", { class: "ledger-confirm-address-section" }, h("div", { class: "ledger-confirm-address-description" }, confirmScreenData === null || confirmScreenData === void 0 ? void 0 : confirmScreenData.authText), h("div", { class: "ledger-confirm-address-data" }, confirmScreenData === null || confirmScreenData === void 0 ? void 0 : confirmScreenData.data), h("div", { class: "ledger-confirm-address-description" }, confirmScreenData === null || confirmScreenData === void 0 ? void 0 : confirmScreenData.areShownText)), h("div", { class: "ledger-confirm-address-footer" }, h("div", null, "Select Approve on your device to confirm."), h("div", null, "Or, if it does not match, close this page and", ' ', h("a", { href: "https://help.multiversx.com/en/", target: "_blank", rel: "noreferrer" }, "contact support"), "."))) }));
        }
        // connectScreenData
        return (h("generic-modal", { onClose: () => this.close(), modalTitle: "Connect Ledger", modalSubtitle: "Unlock your device & open the MultiversX App", body: h("div", null, (connectScreenData === null || connectScreenData === void 0 ? void 0 : connectScreenData.error) && h("p", null, connectScreenData.error), (connectScreenData === null || connectScreenData === void 0 ? void 0 : connectScreenData.customContentMarkup) && (connectScreenData === null || connectScreenData === void 0 ? void 0 : connectScreenData.customContentMarkup), h("button", { "data-testid": DataTestIdsEnum.ledgerConnectBtn, class: "access-button", onClick: () => this.eventBus.publish(LedgerConnectEventsEnum.CONNECT_DEVICE), disabled: connectScreenData === null || connectScreenData === void 0 ? void 0 : connectScreenData.disabled }, "Connect Ledger"), h("a", { href: "https://support.ledger.com/hc/en-us/articles/115005165269-Connection-issues-with-Windows-or-Linux", target: "_blank", rel: "noopener noreferrer", class: "connection-link" }, "Having connection issues?")) }));
    }
    accessWallet() {
        var _a, _b;
        this.eventBus.publish(LedgerConnectEventsEnum.ACCESS_WALLET, {
            addressIndex: this.selectedIndex,
            selectedAddress: this.selectedAddress || ((_b = (_a = this.data.accountScreenData) === null || _a === void 0 ? void 0 : _a.accounts.find(({ index }) => index === this.selectedIndex)) === null || _b === void 0 ? void 0 : _b.address) || '',
        });
    }
    selectAccount(index) {
        var _a, _b, _c;
        this.selectedIndex = index;
        this.selectedAddress = (_c = (_b = (_a = this.data.accountScreenData) === null || _a === void 0 ? void 0 : _a.accounts.find(({ index }) => index === this.selectedIndex)) === null || _b === void 0 ? void 0 : _b.address) !== null && _c !== void 0 ? _c : '';
    }
    async nextPage() {
        this.eventBus.publish(LedgerConnectEventsEnum.NEXT_PAGE);
    }
    async prevPage() {
        this.eventBus.publish(LedgerConnectEventsEnum.PREV_PAGE);
    }
    close(props = { isUserClick: true }) {
        if (props.isUserClick) {
            this.eventBus.publish(LedgerConnectEventsEnum.CLOSE);
        }
        if (this.hostElement && this.hostElement.parentNode) {
            this.hostElement.parentNode.removeChild(this.hostElement);
        }
    }
    dataUpdate(payload) {
        if (payload.shouldClose) {
            return this.close({ isUserClick: false });
        }
        this.data = Object.assign({}, payload);
        forceUpdate(this);
    }
    componentDidLoad() {
        this.eventBus.subscribe(LedgerConnectEventsEnum.DATA_UPDATE, this.dataUpdate.bind(this));
    }
    disconnectedCallback() {
        this.eventBus.unsubscribe(LedgerConnectEventsEnum.DATA_UPDATE, this.dataUpdate.bind(this));
    }
    static get is() { return "ledger-connect-modal"; }
    static get encapsulation() { return "shadow"; }
    static get originalStyleUrls() {
        return {
            "$": ["ledger-connect-modal.css"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["ledger-connect-modal.css"]
        };
    }
    static get properties() {
        return {
            "data": {
                "type": "unknown",
                "mutable": false,
                "complexType": {
                    "original": "ILedgerConnectModalData",
                    "resolved": "ILedgerConnectModalData",
                    "references": {
                        "ILedgerConnectModalData": {
                            "location": "import",
                            "path": "./ledger-connect-modal.types",
                            "id": "src/components/ledger-connect-modal/ledger-connect-modal.types.ts::ILedgerConnectModalData"
                        }
                    }
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "defaultValue": "{\n    accountScreenData: null,\n    confirmScreenData: null,\n    connectScreenData: {},\n  }"
            }
        };
    }
    static get states() {
        return {
            "selectedIndex": {},
            "selectedAddress": {}
        };
    }
    static get methods() {
        return {
            "getEventBus": {
                "complexType": {
                    "signature": "() => Promise<IEventBus>",
                    "parameters": [],
                    "references": {
                        "Promise": {
                            "location": "global",
                            "id": "global::Promise"
                        },
                        "IEventBus": {
                            "location": "import",
                            "path": "utils/EventBus",
                            "id": "src/utils/EventBus.ts::IEventBus"
                        }
                    },
                    "return": "Promise<IEventBus>"
                },
                "docs": {
                    "text": "",
                    "tags": []
                }
            }
        };
    }
    static get elementRef() { return "hostElement"; }
}
//# sourceMappingURL=ledger-connect-modal.js.map
