import React, { useMemo } from 'react';
import PaymentSearch from 'src/components/payments-list/payment-search';

export interface AccountPaymentHistoryContract {
    contractId: string;
    contractName: string;
}

export interface AccountPaymentHistoryProps {
    accountId: string;
    /**
     * The account's contracts (already loaded by the account detail page) used to
     * populate the contract dropdown. Passed down to avoid a second contracts query.
     */
    contracts?: AccountPaymentHistoryContract[];
}

/**
 * Account-scoped payment search rendered on the account detail "Payment History" tab.
 * Pins the search to the current account and feeds the contract dropdown with the
 * account's contracts.
 */
export const AccountPaymentHistory: React.FC<AccountPaymentHistoryProps> = ({
    accountId,
    contracts = [],
}) => {
    const contractOptions = useMemo(
        () =>
            contracts.map(contract => ({
                label: `${contract.contractName} - ${contract.contractId}`,
                value: contract.contractId,
            })),
        [contracts]
    );

    return <PaymentSearch accountConfig={{ accountId, contractOptions }} />;
};

export default AccountPaymentHistory;