import React from 'react';
import { isEmpty } from 'lodash-es';
import TableBasic from 'src/components/shared/table-basic';
import { smartFormatter } from 'src/utils/amount-helpers';
import { getCurrencyLabel } from 'src/utils/currency';
import type { PaymentGroupPaymentProgramCurrencyTotals } from 'src/types/payment-group';

export interface PaymentGroupProgramCurrencyTotalsPropTypes {
    programCurrencyTotals: PaymentGroupPaymentProgramCurrencyTotals;
}

export default function PaymentGroupProgramCurrencyTotals({
    programCurrencyTotals,
}: PaymentGroupProgramCurrencyTotalsPropTypes) {
    const formatProgramCurrencyDetails = () =>
        programCurrencyTotals.map((data, index) => {
            const {
                currencyCode,
                currencyTotal,
                payoneerProgramId,
                paymentEntityName,
            } = data ?? {};
            return {
                id: index,
                cols: [
                    paymentEntityName,
                    payoneerProgramId,
                    getCurrencyLabel(currencyCode),
                    smartFormatter(currencyTotal, currencyCode),
                ],
            };
        });

    const headers = [
        'Payment Entity',
        'Program ID',
        'Payment Currency',
        'Total Payment Amount',
    ];

    return !isEmpty(programCurrencyTotals) ? (
        <div className="PaymentGroupProgramCurrencyTotals">
            <h3 className="ProgramCurrencyTotalHeading">
                Program currency totals:
            </h3>
            <TableBasic
                headers={headers}
                rows={formatProgramCurrencyDetails()}
            />
        </div>
    ) : (
        <></>
    );
}