'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

const index = require('./index-14914b7b.js');
const EventBus = require('./EventBus-1890a8f3.js');
const dataTestIds_enum = require('./dataTestIds.enum-0f98ecfd.js');

// types here need to be synced with the types in sdk-dapp-core ledger.types.ts
var LedgerConnectEventsEnum;
(function (LedgerConnectEventsEnum) {
    LedgerConnectEventsEnum["CONNECT_DEVICE"] = "CONNECT_DEVICE";
    LedgerConnectEventsEnum["ACCESS_WALLET"] = "ACCESS_WALLET";
    LedgerConnectEventsEnum["NEXT_PAGE"] = "NEXT_PAGE";
    LedgerConnectEventsEnum["PREV_PAGE"] = "PREV_PAGE";
    LedgerConnectEventsEnum["CLOSE"] = "CLOSE";
    LedgerConnectEventsEnum["DATA_UPDATE"] = "DATA_UPDATE";
})(LedgerConnectEventsEnum || (LedgerConnectEventsEnum = {}));

function trimAddress(s) {
    const firstFour = s.slice(0, 6);
    const lastFour = s.slice(-6);
    return `${firstFour}...${lastFour}`;
}
const renderAccounts = ({ shownAccounts = [], onSelectAccount, selectedIndex }) => {
    return (index.h("div", { class: "account-list", "data-testid": dataTestIds_enum.DataTestIdsEnum.addressTableContainer },
        index.h("div", { class: "account-header" },
            index.h("div", { class: "account-header-item" }, "Address"),
            index.h("div", { class: "account-header-item" }, "Balance"),
            index.h("div", { class: "account-header-item" }, "#")),
        shownAccounts.map(account => (index.h("div", { class: "account-row", onClick: () => onSelectAccount(account.index) },
            index.h("div", { class: "address-row-item-data " },
                index.h("input", { type: "radio", name: "account", checked: account.index === selectedIndex, value: account.index }),
                index.h("span", { class: "address" }, trimAddress(account.address))),
            index.h("div", { class: "address-row-item-data" }, account.balance),
            index.h("div", { class: "address-row-item-data" }, account.index))))));
};

const ledgerConnectModalCss = ".account-header{display:flex;align-items:center;background-color:#ced4da;line-height:1;padding:16px;text-align:left;font-size:14px;border-radius:8px;padding-right:20px}.account-header-item{flex:1}.account-header-item:first-child{width:55%;max-width:55%}.account-header-item:last-child{width:32px;max-width:32px;flex-basis:32px;text-align:center}.account-list{width:100%;min-height:300px;position:relative}.account-row{display:flex;align-items:center;padding:16px;border-radius:8px;cursor:pointer}.account-row:hover{background-color:#f5f5f5}.address-row-item-data{font-size:14px;line-height:1;flex:1;text-align:left;display:flex;align-items:center;padding-right:16px}.address-row-item-data:last-child{width:32px;max-width:32px;flex-basis:32px;text-align:center;justify-content:center;padding-right:0}.navigation{display:flex;justify-content:center;gap:10rem;margin-top:20px}.navigation-button{background:transparent;border:none;cursor:pointer}.navigation-button:hover{color:#1a56db}.navigation-button:disabled{color:#737373;pointer-events:none}.access-button{display:block;width:200px;margin:20px auto;padding:12px;background-color:#1a56db;color:white;border:none;border-radius:8px;cursor:pointer}.access-button:disabled{background-color:#a1a1a1;color:#e0e0e0;cursor:not-allowed;opacity:0.6;box-shadow:none;transform:none}.connection-link{display:flex;justify-content:center}.ledger-confirm-address{text-align:center;padding:48px 16px;overflow:hidden;display:flex;flex-direction:column;width:100%}@media (min-width: 768px){.ledger-confirm-address{padding:48px 40px}}.ledger-confirm-address-heading{font-weight:500;font-size:24px;line-height:1;margin-bottom:12px}.ledger-confirm-address-section{line-height:1.5;margin-top:40px;font-size:16px;text-align:center}.ledger-confirm-address-section .ledger-confirm-address-description{color:#858688}.ledger-confirm-address-section .ledger-confirm-address-data{background-color:#ced4da;line-height:1;padding:12px;text-align:center;border-radius:8px}.ledger-confirm-address-section .ledger-confirm-address-header{background-color:#ced4da;line-height:1;padding:12px;text-align:center;border-radius:8px}.ledger-confirm-address-footer{font-size:14px;color:var(--gray-700);line-height:1.5;position:relative;margin-top:40px;padding-top:40px}.ledger-confirm-address-footer::before{height:1px;content:'';left:0;bottom:100%;right:0;position:absolute;background-color:var(--gray-700)}.ledger-confirm-address-footer a{color:var(--primary)}";
const LedgerConnectModalStyle0 = ledgerConnectModalCss;

const LedgerConnectModal = class {
    constructor(hostRef) {
        index.registerInstance(this, hostRef);
        this.eventBus = new EventBus.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 ? (index.h("generic-spinner", { "data-testid": dataTestIds_enum.DataTestIdsEnum.ledgerLoading })) : (renderAccounts({
                shownAccounts: accountScreenData.accounts,
                onSelectAccount: this.selectAccount.bind(this),
                selectedIndex: this.selectedIndex,
            }));
            return (index.h("generic-modal", { modalTitle: index.h("div", { "data-testid": `${dataTestIds_enum.DataTestIdsEnum.addressTableContainer}Title` }, "Access your wallet"), modalSubtitle: index.h("div", { "data-testid": `${dataTestIds_enum.DataTestIdsEnum.addressTableContainer}SubTitle` }, "Choose the wallet you want to access"), body: index.h(index.Fragment, null, accountsList, !accountScreenData.isLoading && accountScreenData.accounts.length !== 0 && (index.h(index.Fragment, null, index.h("div", { class: "navigation" }, index.h("button", { onClick: () => this.prevPage(), disabled: accountScreenData.startIndex <= 0, "data-testid": dataTestIds_enum.DataTestIdsEnum.prevBtn, class: "navigation-button" }, '< ', " Prev"), index.h("button", { onClick: () => this.nextPage(), "data-testid": dataTestIds_enum.DataTestIdsEnum.nextBtn, class: "navigation-button" }, "Next", ' >')), index.h("button", { "data-testid": dataTestIds_enum.DataTestIdsEnum.confirmBtn, class: "access-button", onClick: () => this.accessWallet(), disabled: !isSelectedIndexOnPage }, "Access Wallet")))), onClose: () => this.close() }));
        }
        if (confirmScreenData) {
            return (index.h("generic-modal", { onClose: () => this.close(), modalTitle: "Confirm", modalSubtitle: "Confirm Ledger Address", body: index.h("div", { "data-testid": dataTestIds_enum.DataTestIdsEnum.ledgerConfirmAddress, class: "ledger-confirm-address-section" }, index.h("div", { class: "ledger-confirm-address-section" }, index.h("div", { class: "ledger-confirm-address-description" }, confirmScreenData.confirmAddressText), index.h("div", { class: "ledger-confirm-address-header" }, confirmScreenData.selectedAddress)), index.h("div", { class: "ledger-confirm-address-section" }, index.h("div", { class: "ledger-confirm-address-description" }, confirmScreenData === null || confirmScreenData === void 0 ? void 0 : confirmScreenData.authText), index.h("div", { class: "ledger-confirm-address-data" }, confirmScreenData === null || confirmScreenData === void 0 ? void 0 : confirmScreenData.data), index.h("div", { class: "ledger-confirm-address-description" }, confirmScreenData === null || confirmScreenData === void 0 ? void 0 : confirmScreenData.areShownText)), index.h("div", { class: "ledger-confirm-address-footer" }, index.h("div", null, "Select Approve on your device to confirm."), index.h("div", null, "Or, if it does not match, close this page and", ' ', index.h("a", { href: "https://help.multiversx.com/en/", target: "_blank", rel: "noreferrer" }, "contact support"), "."))) }));
        }
        // connectScreenData
        return (index.h("generic-modal", { onClose: () => this.close(), modalTitle: "Connect Ledger", modalSubtitle: "Unlock your device & open the MultiversX App", body: index.h("div", null, (connectScreenData === null || connectScreenData === void 0 ? void 0 : connectScreenData.error) && index.h("p", null, connectScreenData.error), (connectScreenData === null || connectScreenData === void 0 ? void 0 : connectScreenData.customContentMarkup) && (connectScreenData === null || connectScreenData === void 0 ? void 0 : connectScreenData.customContentMarkup), index.h("button", { "data-testid": dataTestIds_enum.DataTestIdsEnum.ledgerConnectBtn, class: "access-button", onClick: () => this.eventBus.publish(LedgerConnectEventsEnum.CONNECT_DEVICE), disabled: connectScreenData === null || connectScreenData === void 0 ? void 0 : connectScreenData.disabled }, "Connect Ledger"), index.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);
        index.forceUpdate(this);
    }
    componentDidLoad() {
        this.eventBus.subscribe(LedgerConnectEventsEnum.DATA_UPDATE, this.dataUpdate.bind(this));
    }
    disconnectedCallback() {
        this.eventBus.unsubscribe(LedgerConnectEventsEnum.DATA_UPDATE, this.dataUpdate.bind(this));
    }
    get hostElement() { return index.getElement(this); }
};
LedgerConnectModal.style = LedgerConnectModalStyle0;

exports.ledger_connect_modal = LedgerConnectModal;

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