import { h } from "@stencil/core";
import { DataTestIdsEnum } from "../../../../constants/dataTestIds.enum";
import { TOTAL_ADDRESSES_COUNT } from "./ledger-addresses.config";
export class LedgerAddresses {
    handleAccessWallet(event) {
        event.preventDefault();
        this.accessWallet.emit();
    }
    handleSelectAccount(accountDerivationIndex) {
        return () => {
            this.selectAccount.emit(accountDerivationIndex);
        };
    }
    render() {
        const isAddressesLoading = this.accountScreenData.isLoading || this.accountScreenData.accounts.length === 0;
        const totalPages = Math.ceil(TOTAL_ADDRESSES_COUNT / this.accountScreenData.addressesPerPage);
        if (isAddressesLoading) {
            return h("mvx-ledger-intro", { isAwaiting: true });
        }
        return (h("div", { class: "ledger-addresses" }, h("div", { class: "ledger-addresses-label" }, "Choose the wallet you want to access"), h("div", { class: "ledger-addresses-list" }, this.accountScreenData.accounts.map((accountDerivation, accountDerivationIndex) => (h("div", { class: { 'ledger-addresses-list-item': true, 'checked': accountDerivation.index === this.selectedIndex }, onClick: this.handleSelectAccount(accountDerivation.index) }, h("div", { class: { 'ledger-addresses-list-item-checkbox': true, 'checked': accountDerivation.index === this.selectedIndex } }), h("div", { class: { 'ledger-addresses-list-item-index': true, 'checked': accountDerivation.index === this.selectedIndex } }, "#", accountDerivationIndex + 1 + this.accountScreenData.startIndex), h("mvx-trim-text", { text: accountDerivation.address, class: "ledger-addresses-list-item-address" }), h("div", { class: "ledger-addresses-list-item-balance" }, accountDerivation.usdValue))))), h("mvx-pagination", { totalPages: totalPages, class: "ledger-address-pagination", currentPage: this.accountScreenData.startIndex / this.accountScreenData.addressesPerPage + 1, onPageChange: (event) => this.pageChange.emit(event.detail) }), h("button", { class: "ledger-addresses-button", "data-testid": DataTestIdsEnum.confirmBtn, onClick: this.handleAccessWallet.bind(this) }, "Access Wallet")));
    }
    static get is() { return "mvx-ledger-addresses"; }
    static get encapsulation() { return "shadow"; }
    static get originalStyleUrls() {
        return {
            "$": ["ledger-addresses.scss"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["ledger-addresses.css"]
        };
    }
    static get properties() {
        return {
            "accountScreenData": {
                "type": "unknown",
                "attribute": "account-screen-data",
                "mutable": false,
                "complexType": {
                    "original": "IAccountScreenData",
                    "resolved": "IAccountScreenData",
                    "references": {
                        "IAccountScreenData": {
                            "location": "import",
                            "path": "../ledger.types",
                            "id": "src/components/functional/ledger/ledger.types.ts::IAccountScreenData"
                        }
                    }
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false
            },
            "selectedIndex": {
                "type": "number",
                "attribute": "selected-index",
                "mutable": false,
                "complexType": {
                    "original": "number",
                    "resolved": "number",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false
            }
        };
    }
    static get events() {
        return [{
                "method": "accessWallet",
                "name": "accessWallet",
                "bubbles": true,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "complexType": {
                    "original": "any",
                    "resolved": "any",
                    "references": {}
                }
            }, {
                "method": "selectAccount",
                "name": "selectAccount",
                "bubbles": false,
                "cancelable": true,
                "composed": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "complexType": {
                    "original": "any",
                    "resolved": "any",
                    "references": {}
                }
            }, {
                "method": "pageChange",
                "name": "pageChange",
                "bubbles": true,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "complexType": {
                    "original": "number",
                    "resolved": "number",
                    "references": {}
                }
            }];
    }
}
//# sourceMappingURL=ledger-addresses.js.map
