import React, { useCallback, useEffect, useMemo, useState } from "react";
import { Select, MenuItem, FormControl, InputLabel, makeStyles, } from "@material-ui/core";
import { useTranslation } from "react-i18next";
import { PaymentCardDetail } from "./PaymentCardDetail";
import { PaymentTenderTypeEnum } from "../../../enums/paymentTenderTypeEnum";
import { PaymentBankDetails } from "./PaymentBankDetails";
const useStyles = makeStyles(() => ({
    select: {
        background: '#F5F6F9',
        paddingTop: 2,
        paddingBottom: 0,
        paddingLeft: 0,
    },
}));
/**
 * PaymentDropdown component renders a dropdown menu for selecting a payment account.
 * It supports both credit card and bank account payment types.
 *
 * @component
 * @param {PaymentDropdownProps} props - The properties for the PaymentDropdown component.
 * @param {Array} props.paymentAccounts - An array of payment accounts to display in the dropdown.
 * @param {Function} props.setSelectedPaymentAccount - A function to set the selected payment account.
 * @param {PaymentTenderTypeEnum} props.paymentType - The type of payment (CreditCard or BankAccount).
 *
 * @returns {JSX.Element} The rendered PaymentDropdown component.
 */
const PaymentDropdown = ({ paymentAccounts, setSelectedPaymentAccount, paymentType }) => {
    var _a;
    const [selectedPaymentCard, setSelectedPaymentCard] = useState(((_a = paymentAccounts === null || paymentAccounts === void 0 ? void 0 : paymentAccounts[0]) === null || _a === void 0 ? void 0 : _a.paymentTokenID) || "");
    const classes = useStyles();
    const { t } = useTranslation();
    /**
     * Renders the content for a MenuItem based on the payment type.
     *
     * @param {CardData} card - The card data.
     * @returns {JSX.Element} The rendered component for the MenuItem.
     */
    const renderMenuItemContent = useCallback((card) => {
        switch (paymentType) {
            case PaymentTenderTypeEnum.CreditCard:
                return React.createElement(PaymentCardDetail, { cardData: card });
            case PaymentTenderTypeEnum.ECheck:
                return React.createElement(PaymentBankDetails, { bankData: card });
            default:
                return null;
        }
    }, [paymentType]);
    /**
     * Handles the change event for the dropdown menu.
     *
     * @param {React.ChangeEvent<{ value: unknown }>} event
     */
    const handleChange = (event) => {
        const selectedPaymentAccount = paymentAccounts.find((account) => account.paymentTokenID === event.target.value);
        setSelectedPaymentCard(event.target.value);
        setSelectedPaymentAccount === null || setSelectedPaymentAccount === void 0 ? void 0 : setSelectedPaymentAccount(selectedPaymentAccount);
    };
    /**
     * Generates a memoized list of menu items for payment accounts.
     *
     * This function uses the `useMemo` hook to optimize performance by memoizing the list of menu items.
     * It maps over the `paymentAccounts` array and creates a `MenuItem` for each account.
     *
     * @returns {JSX.Element[]} A memoized array of `MenuItem` components.
     */
    const menuItems = useMemo(() => paymentAccounts === null || paymentAccounts === void 0 ? void 0 : paymentAccounts.map((card) => (React.createElement(MenuItem, { key: card.paymentTokenID, value: card.paymentTokenID, style: { padding: 0 } }, renderMenuItemContent(card)))), [paymentAccounts, renderMenuItemContent]);
    /**
     * useEffect()
     * Set the default selected payment account when the component mounts or paymentAccounts change
     */
    useEffect(() => {
        const defaultPaymentAccount = paymentAccounts.find((account) => {
            var _a;
            return account.paymentTokenID === ((_a = paymentAccounts === null || paymentAccounts === void 0 ? void 0 : paymentAccounts[0]) === null || _a === void 0 ? void 0 : _a.paymentTokenID);
        });
        setSelectedPaymentAccount === null || setSelectedPaymentAccount === void 0 ? void 0 : setSelectedPaymentAccount(defaultPaymentAccount);
    }, [paymentAccounts, setSelectedPaymentAccount]);
    return (React.createElement(FormControl, { fullWidth: true, variant: "outlined" }, React.createElement(InputLabel, { id: "payment-select-label" }, t('Select Payment Account')), React.createElement(Select, { labelId: "payment-select-label", label: t(`Select Payment Account`), onChange: handleChange, value: selectedPaymentCard, classes: { root: classes.select } }, menuItems)));
};
export default PaymentDropdown;
//# sourceMappingURL=PaymentDropdown.js.map