import { h } from "@stencil/core";
import { StyledHost } from "../../../ui-components";
import { checkoutStore } from "../../../store/checkout.store";
import { radioListItem } from "../../../styles/parts";
import { CardBrandLabels } from "../../checkout/payment-method-option-utils";
import { PAYMENT_METHODS } from "../ModularCheckout";
export class JustifiSavedPaymentMethods {
    constructor() {
        this.onPaymentMethodOptionClick = (paymentMethod) => (e) => {
            e.preventDefault();
            checkoutStore.selectedPaymentMethod = { id: paymentMethod.id, type: paymentMethod.type };
            checkoutStore.paymentToken = paymentMethod.id;
        };
        this.isAllowedPaymentMethod = (paymentMethodType) => {
            const isCard = paymentMethodType === PAYMENT_METHODS.SAVED_CARD;
            const isBankAccount = paymentMethodType === PAYMENT_METHODS.SAVED_BANK_ACCOUNT;
            if (isCard && checkoutStore.disableCreditCard) {
                return false;
            }
            if (isBankAccount && checkoutStore.disableBankAccount) {
                return false;
            }
            return true;
        };
    }
    componentWillLoad() {
        if (checkoutStore.checkoutLoaded) {
            if (!checkoutStore.paymentMethods.length) {
                console.warn('No saved payment methods available.');
            }
            if (checkoutStore.disablePaymentMethodGroup) {
                console.warn('Payment method group is disabled.');
            }
        }
    }
    render() {
        if (checkoutStore.disablePaymentMethodGroup) {
            return null;
        }
        return (h(StyledHost, null, h("div", { class: "saved-payment-methods" }, checkoutStore.paymentMethods.length ? checkoutStore.paymentMethods
            .filter((paymentMethod) => this.isAllowedPaymentMethod(paymentMethod.type))
            .map((paymentMethod) => (h("div", { class: "radio-list-item p-3", part: radioListItem, onClick: this.onPaymentMethodOptionClick(paymentMethod) }, h("form-control-radio", { name: "paymentMethodType", value: paymentMethod === null || paymentMethod === void 0 ? void 0 : paymentMethod.id, checked: checkoutStore.paymentToken === (paymentMethod === null || paymentMethod === void 0 ? void 0 : paymentMethod.id), label: `${CardBrandLabels[paymentMethod === null || paymentMethod === void 0 ? void 0 : paymentMethod.brand] || ''} *${paymentMethod === null || paymentMethod === void 0 ? void 0 : paymentMethod.acct_last_four}` })))) : null)));
    }
    static get is() { return "justifi-saved-payment-methods"; }
    static get encapsulation() { return "shadow"; }
}
