import { h } from "@stencil/core";
import BankAccountFormSkeleton from "./bank-account-form-skeleton";
import { configState, waitForConfig } from "../../config-provider/config-state";
import { generateTabId } from "../../../utils/utils";
import { checkPkgVersion } from "../../../utils/check-pkg-version";
import { checkoutStore } from "../../../store/checkout.store";
export class BankAccountForm {
    constructor() {
        this.isReady = false;
        this.hasLoggedAchDisabledWarning = false;
    }
    async componentWillLoad() {
        await waitForConfig();
        this.iframeOrigin = configState.iframeOrigin;
        this.tabId = generateTabId();
        checkPkgVersion();
    }
    componentDidRender() {
        if (this.isAchDisabledForCheckout()) {
            return;
        }
        const elements = [
            this.accountNumberIframeElement,
            this.routingNumberIframeElement,
        ];
        if (!elements.every(Boolean)) {
            return;
        }
        Promise.all(elements.map((element) => {
            return new Promise((resolve) => {
                element.addEventListener('iframeLoaded', () => { resolve(); });
            });
        })).then(() => {
            this.isReady = true;
        });
    }
    isAchDisabledForCheckout() {
        return (checkoutStore.checkoutLoaded && !checkoutStore.achPaymentsEnabled);
    }
    async validate() {
        if (this.isAchDisabledForCheckout()) {
            return false;
        }
        const accountNumberIsValid = await this.accountNumberIframeElement.validate();
        const routingNumberIsValid = await this.routingNumberIframeElement.validate();
        return accountNumberIsValid && routingNumberIsValid;
    }
    async tokenize({ clientId, paymentMethodMetadata, account }) {
        if (this.isAchDisabledForCheckout()) {
            return {
                error: {
                    message: 'ACH payments are disabled for this checkout (payment_settings.ach_payments=false).',
                },
            };
        }
        const result = await this.accountNumberIframeElement.tokenize(clientId, paymentMethodMetadata, account);
        return result;
    }
    render() {
        if (this.isAchDisabledForCheckout()) {
            if (!this.hasLoggedAchDisabledWarning) {
                console.warn('[bank-account-form] ACH payments are disabled for this checkout (payment_settings.ach_payments=false).');
                this.hasLoggedAchDisabledWarning = true;
            }
            return null;
        }
        return (h("div", null, h(BankAccountFormSkeleton, { isReady: this.isReady }), h("hidden-input", null), h("div", { class: "container-fluid p-0", style: {
                opacity: this.isReady ? '1' : '0',
                height: this.isReady ? 'auto' : '0',
            } }, h("div", { class: "row mb-3" }, h("iframe-input", { inputId: "accountNumber", ref: (el) => (this.accountNumberIframeElement = el), label: "Account Number", iframeOrigin: `${this.iframeOrigin}/v2/accountNumber?tabId=${this.tabId}` })), h("div", { class: "row" }, h("iframe-input", { inputId: "routingNumber", ref: (el) => (this.routingNumberIframeElement = el), label: "Routing Number", iframeOrigin: `${this.iframeOrigin}/v2/routingNumber?tabId=${this.tabId}` })))));
    }
    static get is() { return "bank-account-form"; }
    static get states() {
        return {
            "isReady": {},
            "iframeOrigin": {},
            "tabId": {}
        };
    }
    static get methods() {
        return {
            "validate": {
                "complexType": {
                    "signature": "() => Promise<any>",
                    "parameters": [],
                    "references": {
                        "Promise": {
                            "location": "global",
                            "id": "global::Promise"
                        }
                    },
                    "return": "Promise<any>"
                },
                "docs": {
                    "text": "",
                    "tags": []
                }
            },
            "tokenize": {
                "complexType": {
                    "signature": "({ clientId, paymentMethodMetadata, account }: { clientId: string; paymentMethodMetadata: any; account?: string; }) => Promise<any>",
                    "parameters": [{
                            "name": "__0",
                            "type": "{ clientId: string; paymentMethodMetadata: any; account?: string; }",
                            "docs": ""
                        }],
                    "references": {
                        "Promise": {
                            "location": "global",
                            "id": "global::Promise"
                        }
                    },
                    "return": "Promise<any>"
                },
                "docs": {
                    "text": "",
                    "tags": []
                }
            }
        };
    }
}
