import React from 'react';
import { isEmpty } from 'lodash-es';
import type { GetPaymentGroupListQuery } from 'src/apollo/queries/payment-group-payment/__generated__/payment-group-payments';

type AbacusPaymentGroupPayments = NonNullable<
    GetPaymentGroupListQuery['abacusPaymentGroupPayments']
>;
type AbacusPaymentGroupPaymentsItems = NonNullable<
    AbacusPaymentGroupPayments['items']
>;
type AbacusPaymentGroupPaymentsItem = NonNullable<
    AbacusPaymentGroupPaymentsItems[0]
>;
type PaymentsStatusOverview = NonNullable<
    AbacusPaymentGroupPaymentsItem['paymentsStatusOverview']
>;

interface PaymentGroupPaymenStatusOverviewProps {
    paymentGroupPaymentId: number;
    paymentsStatusOverview: PaymentsStatusOverview;
}

const PaymentGroupPaymenStatusOverview: React.FC<
    PaymentGroupPaymenStatusOverviewProps
> = ({ paymentGroupPaymentId, paymentsStatusOverview }) => {
    const key = `paymentStatusItem-${paymentGroupPaymentId}`;
    const isAllStatusNull = Object.values(paymentsStatusOverview).filter(
        status =>
            status !== null &&
            status !== 'AbacusPaymentGroupPaymentStatusOverview'
    );

    if (isEmpty(isAllStatusNull))
        return (
            <div
                data-testid="no-payment-status"
                className="no-payment-status-overview"
            >
                -
            </div>
        );

    const {
        numberOfPaymentsFailedWithBatch,
        numberOfFailedPayments,
        numberOfCanceledPayments,
        numberOfSuccessfulPayments,
        numberOfPendingPayments,
    } = paymentsStatusOverview;

    if (
        !numberOfPaymentsFailedWithBatch &&
        !numberOfFailedPayments &&
        !numberOfCanceledPayments &&
        !numberOfPendingPayments &&
        numberOfSuccessfulPayments
    )
        return (
            <div
                data-testid="successful-payments"
                key={`${key}-successful-payments`}
            >
                All Payments Successful
            </div>
        );

    return (
        <>
            <div key={`${key}-failed-batches`}>
                {numberOfPaymentsFailedWithBatch
                    ? `${numberOfPaymentsFailedWithBatch} Failed with Batch`
                    : ''}
            </div>
            <div key={`${key}-canceled-payments`}>
                {numberOfCanceledPayments
                    ? `${numberOfCanceledPayments} Canceled`
                    : ''}
            </div>
            <div key={`${key}-failed-payments`}>
                {numberOfFailedPayments
                    ? `${numberOfFailedPayments} Failed`
                    : ''}
            </div>
        </>
    );
};

export default PaymentGroupPaymenStatusOverview;