import React from 'react';
import { Alert } from '@theorchard/suite-components';
import { isEmpty } from 'lodash-es';
import type { PaymentGroupPaymentFailedBatches } from 'src/types/payment-group';
export interface PaymentGroupPaymentFailedBatchesProps {
    failedPaymentBatches: PaymentGroupPaymentFailedBatches;
}

export default function PaymentGroupPaymentFailedBatchesBanner({
    failedPaymentBatches,
}: PaymentGroupPaymentFailedBatchesProps) {
    const errorMessage = (batchNum?: number, message?: string) => (
        <div>
            <div className="batchNum">
                Batch {String(batchNum).padStart(3, '0')} has encounterd an
                error.
            </div>
            {message && <div className="batchFailedMsg">{message}</div>}
            <div />
        </div>
    );

    return (
        <>
            {!isEmpty(failedPaymentBatches) && (
                <Alert.Container
                    className="PaymentGroupDetails-failed-batches-banner"
                    header="Batch Failure Notification"
                >
                    {(failedPaymentBatches ?? []).map(batch => (
                        <Alert
                            className={
                                failedPaymentBatches?.length === 1
                                    ? 'singleBatchError'
                                    : 'mutipleBatchErrors'
                            }
                            // @ts-expect-error: abacusStateId doesn't exist in the gql type, perhaps it needs to be updated
                            key={`${batch?.abacusStateId}-${batch?.batchNum}`}
                            text={errorMessage(
                                batch?.batchNum,
                                batch?.errorMessage ?? undefined
                            )}
                            variant="error"
                        />
                    ))}
                    <Alert
                        className="contactMsg"
                        text="Please contact the Accounting Tech Team to resolve this issue."
                        variant="information"
                    />
                </Alert.Container>
            )}
        </>
    );
}